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

ejSchedule - Template for customizing view header

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

1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon