Calendar View Template layout customization

Posted by Community Admin on 20-May-2014 00:00

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: www.screencast.com/.../GNqZ1rnKNw7

Posted by Community Admin on 28-May-2014 00:00

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 $('',html: $(this).html() );

);

$(".rsHeader").find("span").css("float","left");

$(".rsHeader").append('');

$("#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

Posted by Community Admin on 29-May-2014 00:00

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 (www.screencast.com/.../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

Posted by Community Admin on 30-May-2014 00:00

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('' );

$(".rsHeader").find("span").css("float","left");

$(".rsHeader").append('');

$("#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

Posted by Community Admin on 03-Jun-2014 00:00

Junior,

Thank you. This did work.

Posted by Community Admin on 14-Dec-2014 00:00

hi,

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

please replay as soon as possible

Posted by Community Admin on 06-Apr-2015 00:00

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

This thread is closed

All Replies