0

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] }];
Community
  • 1
  • 1
surfmuggle
  • 5,527
  • 7
  • 48
  • 77
  • 1
    Concerning the localization, I've seen in other tickets that people are having some success with the kendo-global project. You simply reference/load the appropriate language script after the kendo files have been loaded and all widgets will attempt to use that language. Might be worth a shot. https://github.com/loudenvier/kendo-global – Kyle Magilavy Dec 05 '14 at 16:06
  • @KyleM I tested it for the [editor control](http://plnkr.co/edit/WZKFT6jFKn61KCh9Zcwd?p=preview) and it worked. But it did not work for the schedule control. I assume that this is because at least the german [kendo.de-DE.js](https://raw.githubusercontent.com/loudenvier/kendo-global/master/lang/kendo.de-DE.js) does not contain definitions for the schedule control. But nonetheless i appreciate your pointer to the repo. Thank you. – surfmuggle Dec 05 '14 at 17:13

1 Answers1

7

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.

surfmuggle
  • 5,527
  • 7
  • 48
  • 77
Satya Ranjan Sahoo
  • 1,086
  • 7
  • 24