Show week number in custom view

[Igor]

Hi!

i am creating a custom schedule view like that:

var SchedulerWeekView = kendo.ui.MultiDayView.extend({
          options: {
              selectedDateFormat: "{0:D} - {1:D}"
          },
          nextDate: function () {
              var startDate = this.startDate();
              return new Date(startDate.setDate(startDate.getDate() + 7));
          },
          previousDate: function () {
              var endDate = this.endDate();
              return new Date(endDate.setDate(endDate.getDate() - 7));
          },
          name: "SchedulerWeekView",
          calculateDateRange: function () {

              var selectedDate = this.options.date,
                  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                  idx, length,
                  dates = [];

              for (idx = 0, length = 7; idx < length; idx++) {
                  if (start.getDay() <= 5 && start.getDay() > 0) {
                      dates.push(start);
                  }
                  start = kendo.date.nextDay(start);
              }

              this._render(dates);
          }

      });

I would like to show the week number on selectedDateFormat. Right now it shows: {week start date} - {week end date}.
Is that possible to change format to show the week number?

Thanks!

[Rosen]

Hello Igor,

You can take full control over the text in question by overriding the dateForTitle method and returning the desired string.

var SchedulerWeekView = kendo.ui.MultiDayView.extend({
  dateForTitle: function() {
    return  "My custom text"
  },
 //...
});

Regards,
Rosen
Telerik

[Igor]

Hi Rosen, thank you for your answer.
I am not sure, but in the example you provided it is not possible to retrieve current selected week number.
I need to have week number to display it in dateForTitle. E.g.:

var SchedulerWeekView = kendo.ui.MultiDayView.extend({
  dateForTitle: function() {
    var weekNumber = 1;     //TODO: how do I retrieve the real week number here?
    return "Week: "+weekNumber;
  },
 //...
});

Thanks in advance!

[Igor]

the only idea coming - is to calculate the week number inside the navigation functions (previousDate and nextDate) and put it to a global variable:

var weekNumber = 0;

 
//week number of date calculation from here:
//http://stackoverflow.com/questions/7765767/show-week-number-with-javascript

Date.prototype.getWeek = function() {

        var onejan = new Date(this.getFullYear(),0,1);

        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);

    }

 

var SchedulerWeekView = kendo.ui.MultiDayView.extend({

 

          nextDate: function () {

              var startDate = this.startDate();

              var navigatedDate = new Date(startDate.setDate(startDate.getDate() + 7));

               

               //Store week number

               weekNumber = navigatedDate.getWeek();

 

               return navigatedDate;

          },

           

          previousDate: function () {

              var endDate = this.endDate();

               

              var navigatedDate = new Date(endDate.setDate(endDate.getDate() - 7));

               

              //Store week number

               weekNumber = navigatedDate.getWeek();

 

               return navigatedDate;

          },

  

         dateForTitle: function() {

             

            //return previously stored week number

          

            return "Week: " + weekNumber;

          },

  

        //...... other configuration settings

  

      });

I have not tested this example yet.
I am really doubt that is good idea, since we are using global variable but not the real data binding/formatting.
In addition, it is a View prototype, that might be reusable, therefore global variables might be overwritten.

[Rosen]

Hi Igor,

As the dateForTitle is part of the SchedulerWeekView  class, you do have access to other members. Thus, you could use the startDate value to calculate the week number within the dateForTitle function. For example:

dateForTitle: function() {
  return "Week " + kendo.recurrence.weekInYear(this.startDate(), this.calendarInfo().firstDay);
}

Regards,
Rosen
Telerik

[Igor]

Hi Rosen
Thanks for quick answer. I just tried and it works for me!