Search code examples
kendo-uitelerikkendo-scheduler

Kendo-schedule setting weekstart to monday and setting culture


I am evaluating kendo-ui and i would like to configure the views views: [{type: "week", ...}, { type: "workweek", ...}, { type: "month", ...}] of kendo-ui scheduler to always start with monday.

I found Q: Setting first day of week to Monday but is has no accepted answers and offered solutions did not work for me.

Trying to set workWeekStart

So after trying several things out i ended up with:

$("#scheduler2").kendoScheduler({        
  date: new Date("2014/12/1"),
  allDayEventTemplate: $("#event-template").html(),                
  timezone: "Etc/UTC",
  views: [{ type:"day", showWorkHours:true, workWeekStart:0}
   ,{type:"week", workWeekStart:1, workWeekEnd:5
               , showWorkHours:true, selected:true}
   ,{type:"workWeek", workWeekStart:1, workWeekEnd:0
               , showWorkHours: true, selected: true }                    
  ,{type:"month", workWeekStart: 2 }
  , "agenda"]
  ,dataSource: events1,
  resources: [ { field: "attendees", dataSource: people1, multiple: true } ]
});

As you can see this works for type:"workWeek" every week starts with a monday and since i set workWeekEnd:0 it ends with sunday. Using the same configuration settings on type:"week" or type:"month" has no effect - the week always starts with a sunday.

Kendo-ui schedulre workweek start mondays

Trying to set the culture

I tried three configuration options (see // attempt # below)

// attempt 1
kendo.culture("de-DE");

$("#scheduler2").kendoScheduler({        
  date: new Date("2014/12/1"),
  culture: "de-DE",      // attempt 2
  allDayEventTemplate: $("#event-template").html(),                
  views: [{ type:"week", culture: "de-DE", // attempt 3 
  

But none of them had any effect. The reason could be

  • i am doing it wrong
  • inside kendo.all.js i found only one culture preconfiguration kendo.cultures["en-US"] so i am assuming i need to create an configuration myself or create / edit some localisation file

Questions

  1. How can i set monday to be the first day of the week for the views types type: "week" ... type:"month"
  2. How can i set the culture for the schedule widget
  3. Do i have to create a localisation file or set up the desired culture "de-DE" by hand or are there more preconfigured cultures somewhere in the kendo-ui bundle that i can use?

Arrays for the code above

var people1 = [{ text: "Alex", value: 1, color: "blue" }
      , { text: "Bob", value: 2, color: "red" }
      , { text: "Charlie", value: 3, color: "yellow" }
      , { text: "Doris", value: 4, color: "green" }];

var events1 = [
    { id: 1, title: "Int A 2.12", start: new Date("2014/12/2 08:00 AM"), end: new Date("2014/12/2 09:00 AM"), isAllDay: false, attendees: [1, 2] },
    { id: 2, title: "Int B 2.12", start: new Date("2014/12/2 08:30 AM"), end: new Date("2014/12/2 10:30 AM"), isAllDay: false, attendees: [2, 3] },
    { id: 3, title: "Int C 2. - 5.", start: new Date("2014/12/2 08:30 AM"), end: new Date("2014/12/5 10:30 AM"), isAllDay: true,  attendees: [1] },
    { id: 4, title: "Int D 3. - 4.", start: new Date("2014/12/3 08:30 AM"), end: new Date("2014/12/4 10:30 AM"), isAllDay: true, attendees: [3] },
    { id: 5, title: "Int E 4.12", start: new Date("2014/12/4 10:00 AM"), end: new Date("2014/12/4 2:00 PM"), isAllDay: false, attendees: [1, 4] }];

Solution

  • To set start day of week as "Monday" put the below line of code before the scheduler declaration.

      kendo.culture().calendar.firstDay = 1;
      // and further down initialize the scheduler
      $("#yourID").kendoScheduler({                
          //    ...
    

    This works both for month and week view. Hope this helps.