We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding the week number in the header

Hi,

It would be possible to add in the header of a Schedule in Month view the number of the week for every week in the month?

Thanks,
Cornel.

5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 1, 2017 07:08 AM UTC

  
Hi Cornel, 
 
Thank you for contacting Syncfusion support. 
 
Yes, it is possible to add week number in month view and the sample can be download from the below location. 
 
Kindly find the below code example used in the sample.    
 
<Code> 
function onCreate() { 
            var obj = $("#Schedule1").data("ejSchedule"); 
            if (obj.currentView() == "month") { 
                Date.prototype._getWeekNumber = function () { 
                    var weekNo = Math.ceil((((this - new Date(this.getFullYear(), 0, 1)) / 86400000) + new Date(this.getFullYear(), 0, 1).getDay() + 1) / 7); 
                    return (weekNo > 52) ? weekNo - 52 : weekNo; 
                }; 
                var result = $.grep($(".cusRow"), function (value) { if ($(value).hasClass("cusRow")) { return value; } }); 
                if (result.length != 0) $(".cusRow").remove(); 
                var date = new Date(obj.currentDate()); 
                var weekFirst = new Date(date.getFullYear(), date.getMonth(), 1); 
                var $tr = "<tr class='cusRow'>"; 
              Date.prototype._currentWeekDates = function (firstdayofweek) { 
                var dayDiffer = this.getDay() - firstdayofweek, 
                    start = new Date(this.getFullYear(), this.getMonth(), this.getDate() + (((dayDiffer < 0) ? dayDiffer + 7 : dayDiffer) * -1)), 
                    end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 6); 
                return { start: new Date(start), end: new Date(end) }; 
            }; 
              for (var a = 0, len = obj._dateRender.length / 7 ; a < len; a++) { 
                    var weekDate = weekFirst._currentWeekDates(obj._firstdayofweek); 
                    var weekNumber = weekDate.start._getWeekNumber(); 
                    var count = 0, total = ((weekDate.end - weekDate.start) / (1000 * 60 * 60 * 24)) + 1; 
                    for (b = 0; b < total; b++) { 
                        if (obj.monthDays.indexOf(weekDate.start.getTime() + (1000 * 60 * 60 * 24 * b)) != -1) count++; 
                    } 
                    $tr += "<td colspan='" + count + "' style='padding:5px;border-left:1px solid #c3c3c3;border-bottom:1px solid #c3c3c3;text-align: center;'>" + weekNumber + "</td>"; 
                    weekFirst = new Date(weekDate.end.getTime() + (1000 * 60 * 60 * 24)); 
                } 
                $tr += "</tr>"; 
                $($tr).insertBefore(obj.element.find(".e-headerdays").find("tr:first")); 
                obj.element.find(".cusRow").children().first().css("border-left","none"); 
                obj.refreshScroller(); 
            } 
        } 
</Code> 

Regards, 
Karthigeyan 



CA Cornel Amarandei March 1, 2017 09:49 AM UTC

Hi Karthigeyan,

Thanks for your information.

Your sample code is working well when I first open the page, but after I change the current month, the display of the Schedule is the default one again. I've tried to put the same code in a onNavigate event, but with no luck.

Do you have any suggestions?

Thanks,
Cornel.


KK Karthigeyan Krishnamurthi Syncfusion Team March 2, 2017 06:06 AM UTC

Hi Cornel, 
 
Thanks for your update. 
 
We suspect that in your sample ActionComplete event may not be used which could be the cause for the issue. We have checked the provided sample and week number is showing after navigation and for the same we have prepared the video demo which can be download from the below location. 

If issue persist kindly share your code example/runnable sample (if possible) to serve you better. 

Regards, 
Karthigeyan 



CA Cornel Amarandei March 2, 2017 10:34 AM UTC

Hi Karthigeyan,

Thanks for your information.

Adding the ActionComplete event with the same code as in the onClose(), fixed the problem.

Thanks,
Cornel.


KK Karthigeyan Krishnamurthi Syncfusion Team March 3, 2017 06:21 AM UTC

Hi Cornel, 
 
We are happy that our solution has fulfilled your requirement. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


Loader.
Live Chat Icon For mobile
Up arrow icon