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.

ejSchedule - Template for customizing view header

Thread ID:

Created:

Updated:

Platform:

Replies:

129505 Mar 22,2017 11:09 AM Mar 23,2017 01:43 AM JavaScript 1
loading
Tags: ejSchedule
Brian
Asked On March 22, 2017 11:09 AM

Is there a template for customizing the view header, or some other way of customizing it? I attached an image to show exactly the header I'm refering to
Attachment: ViewHeader_e5ecdf35.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On March 23, 2017 01:43 AM

   
Thank you for contacting Syncfusion support.   
   
By default, there is no template option to customize the header bar and we have prepared the sample to customize the header bar using events, which can be viewed from the below link.   
   
Kindly refer the below code example used in the sample.   
 
<Code> 
create: "onCustom", 
actionComplete: "onComplete" 
 
function onCustom() { 
            var schArgs = $("#Schedule1").ejSchedule("instance"); 
            var html = schArgs._getCurrentDateHeaderValue(); 
            if (schArgs.currentView() == "week" || schArgs.currentView() == "workweek" || schArgs.currentView() == "agenda") { 
                var newHtml = html.split(" ")[html.split(" ").length-1] + " " + html.replace(html.split(" ")[html.split(" ").length-1], "").trim(); 
                schArgs.element.find(".e-datedisplay").html(newHtml); 
            } 
            else if (schArgs.currentView() == "day") { 
                for (var i = 0; i < schArgs.dateRender.length; i++) { 
                    temp = ej.format(new Date(schArgs.dateRender[i]), "MM-dd-yyyy dddd"); 
                    $(".e-datedisplay").html(temp); 
                } 
            } 
            else { 
                var Month = html.split(" ")[0]; 
                var Year = html.split(" ")[1]; 
                var newFormat = Year + " " + Month; 
                schArgs.element.find(".e-datedisplay").html(newFormat); 
            } 
        } 
 
function onComplete(args) { 
            if (args.requestType == "viewNavigate" || args.requestType == "dateNavigate") 
                onCustom(); 
        } 
</Code> 
 
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.

;