+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Calendar View Template layout customization

Calendar View Template layout customization

7 posts, 0 answered
  1. Gregg
    Gregg avatar
    5 posts
    Registered:
    27 Mar 2014
    20 May 2014
    Link to this post

    Is it possible to update the Calendar View Template to move the 'previous' and 'next' month arrows to appear to the right, after the display of current month?

    Here is a screenshot of what we would like to achieve here: http://www.screencast.com/t/GNqZ1rnKNw7

  2. Junior Dominguez
    Junior Dominguez avatar
    115 posts
    Registered:
    06 Dec 2016
    28 May 2014
    Link to this post
    Hi Gregg,

    Although we can't modify the template of the RadScheduler control used in Sitefinity in such way, it is possible to move the arrows to the desired position using javascript. For instance, placing a javascript widget in your page with the following code will move the arrows to the desired position as shown in this image:

    $(document).ready(function() {
       
      var prev = $(".rsPrevDay").detach();
      var next = $(".rsNextDay").detach();
      
       $(".rsHeader").find("h2").replaceWith(function(){
         return $('<span />',{html: $(this).html() } );
    });
       
      $(".rsHeader").find("span").css("float","left");
       
      $(".rsHeader").append('<span style="float:left;" id="movedContent"></span>');
         
         
      $("#movedContent").append( prev);
      $("#movedContent").append( next);
       
       
       
    });



    Kind Regards,
    Junior Dominguez
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Gregg
    Gregg avatar
    5 posts
    Registered:
    27 Mar 2014
    29 May 2014 in reply to Junior Dominguez
    Link to this post

    Thanks Junior.

    While this did work in moving the elements to appear in the way we would like, this update breaks some of the functionality of the Calendar. Specifically, the Month will not get update once I apply this solution. Here is a screenshot (http://www.screencast.com/t/XOjimf41) of what happens after I have clicked the next month '>'. In that screenshot, I am in the month of July, but May still appears

  4. Junior Dominguez
    Junior Dominguez avatar
    115 posts
    Registered:
    06 Dec 2016
    30 May 2014
    Link to this post
    Hi Gregg,

    Thank you for the update.

    Please use the following code instead:

    $(document).ready(function() {
       
      var prev = $(".rsPrevDay").detach();
      var next = $(".rsNextDay").detach();
      
       $(".rsHeader").find("h2").wrap('<span />' );
       
      $(".rsHeader").find("span").css("float","left");
       
      $(".rsHeader").append('<span style="float:left;" id="movedContent"></span>');
         
      
       
      $("#movedContent").append( prev);
      $("#movedContent").append( next);
       
       
       
    });



    Kind Regards,
    Junior Dominguez
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Gregg
    Gregg avatar
    5 posts
    Registered:
    27 Mar 2014
    03 Jun 2014 in reply to Junior Dominguez
    Link to this post

    Junior,

        Thank you. This did work.

  6. Vakeel
    Vakeel avatar
    19 posts
    Registered:
    13 May 2014
    14 Dec 2014
    Link to this post

    hi,

    how to change calender event popup DateTime format to 12 hours ?

    please replay as soon as possible

  7. Junior Dominguez
    Junior Dominguez avatar
    115 posts
    Registered:
    06 Dec 2016
    06 Apr 2015
    Link to this post
    Hi Vakeel,

    Unfortunately, the formats are hardcoded in the event view. In order to customize the date formats, we should customize the view dialog:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using Telerik.Sitefinity.Modules.Events.Web.UI;
      
    namespace SitefinityWebApp.CalendarViewCustom
    {
        public class ViewEventDialogCustom : ViewEventDialog
        {
            private string dateFormat;
      
            public string DateFormat
            {
                get
                {
                    if (string.IsNullOrWhiteSpace(dateFormat))
                    {
                        dateFormat = "dddd, MMMM d";
                    }
                    return dateFormat;
                }
                set { dateFormat = value; }
            }
      
            private string timeFormat;
      
            public string TimeFormat
            {
                get
                {
                    if (string.IsNullOrWhiteSpace(timeFormat))
                    {
                        timeFormat = "hh:mm tt";
                    }
                    return timeFormat;
                }
                set { timeFormat = value; }
            }
      
            public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
            {
                var baseScripts = base.GetScriptReferences();
                var all = baseScripts.ToList();
                // not using embedded script
                all.Add(new System.Web.UI.ScriptReference("~/CalendarViewCustom/ViewEventDialogCustom.js"));
                return all;
            }
      
            public override IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()
            {
                var @base = base.GetScriptDescriptors();
                var descriptor = @base.Last() as ScriptControlDescriptor;
                descriptor.AddProperty("dateFormat", this.DateFormat);
                descriptor.AddProperty("timeFormat", this.TimeFormat);
      
                return @base;
            }
        }
    }



    /// <reference name="MicrosoftAjax.js"/>
    Type.registerNamespace("SitefinityWebApp.CalendarViewCustom");
      
    SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom = function (element) {
        this._dateFormat = null;
        this._timeFormat = null;
      
        SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.initializeBase(this, [element]);
    };
      
    SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.prototype = {
      
        /* --------------------------------- set up and tear down --------------------------------- */
      
        initialize: function () {
            SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.callBaseMethod(this, 'initialize');
        },
      
        dispose: function () {
            SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.callBaseMethod(this, 'dispose');
        },
      
        _rebind: function () {
            jQuery(this.get_startDateLabel()).hide();
            jQuery(this.get_startTimeLabel()).hide();
            SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.callBaseMethod(this, '_rebind');
      
            var startDate = this._appointment.get_start().format(this.get_dateFormat());
            jQuery(this.get_startDateLabel()).html(startDate);
      
            if (this._appointment.get_attributes().getAttribute("AllDay") != "True") {
                var startTime = this._appointment.get_start().format(this.get_timeFormat());
                jQuery(this.get_startTimeLabel()).html(startTime);
            }
      
            jQuery(this.get_startDateLabel()).show();
            jQuery(this.get_startTimeLabel()).show();
        },
      
        set_timeFormat: function (value) {
            this._timeFormat = value;
        },
        get_timeFormat: function () {
            return this._timeFormat;
        },
      
        set_dateFormat: function (value) {
            this._dateFormat = value;
        },
        get_dateFormat: function () {
            return this._dateFormat;
        },
    };
      
    // inherit from default control
    SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom.registerClass('SitefinityWebApp.CalendarViewCustom.ViewEventDialogCustom',
        Telerik.Sitefinity.Modules.Events.Web.UI.ViewEventDialog);


    Then we need to modify the calendar template in order to override the default dialog:

    <%@ Register TagPrefix="sitefinity" Namespace="SitefinityWebApp.CalendarViewCustom" Assembly="SitefinityWebApp" %>
     <sitefinity:ViewEventDialogCustom runat="server" ID="viewEventDialog" DateFormat="dd MMM, dddd yyyy" TimeFormat="hh:mm tt" IsModal="true" />


    You can set the desired formats in the custom view properties.

    A short video is attached showing the functionality.


    Best Regards,
    Junior Dominguez
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
7 posts, 0 answered