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.
Unfortunately, activation email could not send to your email. Please try again.

Customize schedule weeks label

Thread ID:

Created:

Updated:

Platform:

Replies:

129240 Mar 6,2017 06:02 PM Mar 9,2017 11:35 PM ASP.NET MVC 7
loading
Tags: Schedule
Laura Jordan
Asked On March 6, 2017 06:02 PM

Hi,

I am using the Schedule control and I like to change the label for the weeks in the Month view. What I want is to set the week number instead of the the days range.

Really appreciate the support,

Thanks in advance!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 7, 2017 08:10 AM

Hi Laura, 
 
Thank you for contacting Syncfusion support. 
 
We have prepared the sample to display the week numbers and to hide the days in month view which can be download from the below location. 
 
Kindly refer 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"); 
            if (obj.element.find(".e-horizontmonthheaderdaytd").parent().length > 0) { 
              //  obj.element.find(".e-horizontmonthheaderdatetd").parent().remove(); // it can be used to remove the date number row 
                obj.element.find(".e-horizontmonthheaderdaytd").parent().remove(); // it will remove the day names 
            } 
            obj.refreshScroller(); 
        } 
    } 
    function onComplete(args) { 
        if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate") 
            onCreate(); 
    } 
.e-schedule .e-horizontalmonthtimecellsht { /*adjust the height if you wish to display only week number in month view*/  
        height: 59px; 
    } 
</Code> 
 
Regards, 
Karthigeyan 


Laura Jordan
Replied On March 7, 2017 10:27 AM

Hi,

Thanks for the update, but didn't work as expected. I need to show the weeks number label where are the days range without changing the Schedule control Month view.

Can you please help me to acomplish this?

Really appreciate the support,

Thanks

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 8, 2017 05:59 AM

Hi Laura,  
 
Thanks for your update. 
 
We have prepared the sample to replace the replace the day range with the week number which can be download from the below location. 

Kindly refer 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 date = new Date(obj.currentDate()); 
            var weekFirst = new Date(date.getFullYear(), date.getMonth(), 1); 
            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; 
                $($(".e-scrolltimecells").find(".e-timecelldivs")[a]).html(weekNumber); 
                weekFirst = new Date(weekDate.end.getTime() + (1000 * 60 * 60 * 24)); 
            } 
        } 
    } 
function onComplete(args) { 
        if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate") 
            onCreate(); 
    } 
</Code> 

Regards, 
Karthigeyan 


Laura Jordan
Replied On March 8, 2017 06:36 PM

Thanks! It works perfect. 

Just one more request, how can I put the label "Week" before the week number?

Best regards!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 9, 2017 02:04 AM

Hi Laura,   
 
We are happy that our solution has fulfilled your requirement. 
 
Kindly replace the below code example in our previous sample to include Week before the week number. 
 
<Code> 
$($(".e-scrolltimecells").find(".e-timecelldivs")[a]).html("Week"+" "+weekNumber); 
</Code> 
 
Regards, 
Karthigeyan 


Laura Jordan
Replied On March 9, 2017 10:08 AM

Done!

Thanks for all the support. Best regards!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 9, 2017 11:35 PM

Hi Laura,    
 
Thanks for your update. 
 
Please let us know if you need further assistance.  
 
Regards, 
Karthigeyan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;