You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除SyncFusion Blazor Scheduler工具提示中的日期信息?

如何移除SyncFusion Blazor Scheduler工具提示中的日期信息?

嘿,我来帮你搞定这个问题!既然你是用SyncFusion Blazor Scheduler做重复周计划,不需要显示日期,已经去掉大部分地方的日期但tooltip和事件详情里还留着,这里有几个实用的方法可以帮你精准移除那些红色下划线的日期部分:

  • 自定义Tooltip模板(最推荐)
    SyncFusion Scheduler支持完全自定义tooltip的内容,你可以通过TooltipTemplate属性来控制显示哪些信息,直接把日期相关的内容去掉就行。示例代码如下:

    <SfScheduler TValue="AppointmentData">
        <SchedulerTemplates>
            <TooltipTemplate>
                @{
                    var appointment = context as AppointmentData;
                }
                <div class="tooltip-content">
                    <h5>@appointment.Subject</h5>
                    <p>@appointment.StartTime.ToString("HH:mm") - @appointment.EndTime.ToString("HH:mm")</p>
                    @if (!string.IsNullOrEmpty(appointment.Description))
                    {
                        <p>@appointment.Description</p>
                    }
                </div>
            </TooltipTemplate>
        </SchedulerTemplates>
        <!-- 这里放你的Scheduler其他配置项 -->
    </SfScheduler>
    

    这样设置后,hover事件时只会显示主题、时间段(只展示时分)和描述,完全看不到日期啦。

  • 自定义事件编辑模板
    针对选中事件时弹出的详情里的日期,你可以用EditorTemplate自定义编辑界面,只保留时间相关的输入控件,去掉日期部分:

    <SfScheduler TValue="AppointmentData">
        <SchedulerTemplates>
            <EditorTemplate>
                @{
                    var appointment = context as AppointmentData;
                }
                <div class="editor-container">
                    <div class="form-group">
                        <label>主题</label>
                        <input type="text" @bind="@appointment.Subject" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>开始时间</label>
                        <input type="time" @bind="@appointment.StartTime.TimeOfDay" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>结束时间</label>
                        <input type="time" @bind="@appointment.EndTime.TimeOfDay" class="form-control" />
                    </div>
                    @if (!string.IsNullOrEmpty(appointment.Description))
                    {
                        <div class="form-group">
                            <label>描述</label>
                            <textarea @bind="@appointment.Description" class="form-control"></textarea>
                        </div>
                    }
                </div>
            </EditorTemplate>
        </SchedulerTemplates>
        <!-- 这里放你的Scheduler其他配置项 -->
    </SfScheduler>
    

    这个方法能让你完全掌控事件编辑界面的内容,彻底移除日期相关的输入和显示。

  • 快速方案:用CSS隐藏日期元素
    如果你不想改模板,也可以试试用CSS直接隐藏对应的日期元素,不过要注意这个方法依赖组件的CSS类名,可能会随着SyncFusion版本更新失效,适合临时快速解决:

    /* 隐藏tooltip中的日期区域 */
    .e-schedule .e-event-tooltip .e-date-time {
        display: none;
    }
    
    /* 隐藏事件编辑弹窗里的日期输入框 */
    .e-schedule .e-event-editor .e-date-input {
        display: none;
    }
    

    把这段CSS加到你的样式文件里,就能快速隐藏那些日期部分了。

另外提醒一下,如果你设置了重复事件的规则,要确保你的预约数据模型里的日期配置不会影响重复逻辑,毕竟你是做无日期的周计划,应该已经把重复规则设置成按星期重复啦。

备注:内容来源于stack exchange,提问作者cavlier145

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.17 11:57:58