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

Question

I am using Kendo UI - Scheduler (Agenda and Month)

In Agenda, I want to display just Day Name (Sunday) instead of Full date.

As I am new to coding, your help can be much appreciated.

Online Demo

Image Reference:

$(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

You can specify the format of a views date by setting the selectedDateFormat property in the view options.

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

{0:[some format]} will format the view start date, {1:[some format]} will format the view end date.

For example

{0:dddd} will produce the string

Sunday

and "{0:dddd, MMM dd, yyyy} - {1:dddd, MMM dd,yyyy}" will produce the string

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

See here for more info http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-views.selectedDateFormat