Kendo UI（调度程序）- 在 Header 中仅显示日期名称（例如：星期二）而不是完整日期

Question

我正在使用 Kendo UI - 日程安排程序（日程和月份）

在议程中，我只想显示日期名称（星期日）而不是完整日期。

由于我是编码新手，非常感谢您的帮助。

Online Demo

图片参考：

$(document).ready(function() {

var _data = new kendo.data.SchedulerDataSource({
    data: [
      {
      eventID: 1,
      title: "Group meeting.",
      start: new Date(),
      end: new Date(),
      description: "Take my brother to his group meeting.",
      },
    ],

    schema: {
      model : { id : "eventID" }
    }

  });

  function save(){
    console.log(_data);    
  }

  $('#socialMediaCalendar').kendoScheduler({
    date: new Date(),
    //startTime: new Date(),
    height: 600,
    views: [
      { type: "agenda", title: "Agenda", selected: true },
      { type: "month" },
    ],

    save: save,
    dataSource:_data
  });

  $(function () {
    $("#socialMediaCalendar").kendoTooltip({
      filter: ".k-event",
      position: "top",
      width: 250,
      content: kendo.template($('#calendarPopupTemplate').html())
    });
  });

});

<div class="rp-calendar">
  <div id="socialMediaCalendar"></div>
</div>

<script id="calendarPopupTemplate" type="text/x-kendo-template"> 
    #var uid = target.attr("data-uid");#
    #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
    #var model = scheduler.occurrenceByUid(uid);#

    #if(model) {#
        <strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
        <strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
        <strong>event description:</strong> #=model.description#<br />
    #} else {#
        <strong>No event data is available</strong>
    #}#
</script>

Answer 1

您可以通过在视图选项中设置 selectedDateFormat 属性来指定视图日期的格式。

views: [
  { type: "agenda", title: "Agenda", selected: true, selectedDateFormat: "{0:dddd}" },
  { type: "month" },
]

{0:[some format]} 将格式化视图开始日期，{1:[some format]} 将格式化视图结束日期。

例如

{0:dddd} 将生成字符串

Sunday

和 "{0:dddd, MMM dd, yyyy} - {1:dddd, MMM dd,yyyy}" 将生成字符串

Sunday, Dec 13, 2015 - Saturday, Dec 19,2015

查看此处了解更多信息http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-views.selectedDateFormat

Kendo UI（调度程序）- 在 Header 中仅显示日期名称（例如：星期二）而不是完整日期

Kendo UI (Scheduler) - Show only Day Name (Eg: Tuesday) in Header instead of full date

jquery

kendo-ui

kendo-scheduler