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.
Syncfusion Feedback

ejSchedule - Template for customizing view header

Thread ID:

Created:

Updated:

Platform:

Replies:

129505 Mar 22,2017 03:09 PM UTC Mar 23,2017 05:43 AM UTC JavaScript 1
loading
Tags: ejSchedule
Brian
Asked On March 22, 2017 03:09 PM UTC

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 05:43 AM UTC

   
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.

Warning Icon 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.Close Icon

;