ASPX templates
Version 5.x > ASPX templates > CMSCalendar Control View modes: 
User avatar
Member
Member
eric.rovtar-hudsonchapel - 8/13/2010 2:09:59 PM
   
CMSCalendar Control
Is there a way to create my own next and previous button that will trigger the CMSCalendar control to update? I'm using an UpdatePanel.

Thanks!

User avatar
Member
Member
eric.rovtar-hudsonchapel - 8/16/2010 2:54:38 PM
   
RE:CMSCalendar Control
Also... Whenever I try to use the SelectedDate or VisibleDate property, it always returns January 1, 0001.

Ideas? =\

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 8/24/2010 6:50:40 AM
   
RE:CMSCalendar Control
Hi,

Could you please provide us with more details? Could you please post the code where you are updating CMS calendar? Where are you changing properties?

We are not able to solve this issue without detailed description. You can also send us screenshots to support@kentico.com with reference on this thread.

All additional information would be very helpful.


Best regards,
Ivana Tomanickova

User avatar
Member
Member
eric.rovtar-hudsonchapel - 8/24/2010 5:55:59 PM
   
RE:CMSCalendar Control
Here is the Calendar Control:
<h2 id="month" runat="server"></h2>

<asp:Button ID="btnNext" Text="Next" OnClick="btnNext_Click" runat="server" />
<cms:CMSEventCalendar ID="Calendar"
Path="%"
ClassNames="cms.event"
UseUpdatePanel="true"
runat="server" />


Here is the code behind:
protected void btnNext_Click(object sender, EventArgs e)
{
DateTime next = Calendar.CalendarControl.SelectedDate.AddMonths(1);
Calendar.CalendarControl.SelectedDate = next;
}


protected void Page_Load(object sender, EventArgs e)
{
//set month
month.InnerHtml = Calendar.CalendarControl.SelectedDate.ToLongDateString();

//Title
Calendar.CalendarControl.ShowTitle = false;
Calendar.CalendarControl.ShowNextPrevMonth = true;
}
}


So how do I get it to update? And how do I get the month to update correctly?

I don't want to use the native controls because I want to format them differently and have them displayed in different locations.

Thanks!

-Eric


User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 8/30/2010 6:43:55 AM
   
RE:CMSCalendar Control
Hi,

Could you please insert button and calendar control to .aspx page?


<asp:Button id="NextButton" Text="Next" runat="server" />
<h1>
Calendar
</h1>
<div class="Calendar" >
<cms:CMSCalendar ID="Calendar" runat="server" Path="/Events/%" ClassNames="cms.bookingevent"
SkinID="EventCalendar" DayField="EventDate" TransformationName="cms.bookingevent.EventCalendarItem"
NoEventTransformationName="cms.bookingevent.calendarnoevent" EnableViewState="false" TimeZone="Inherit" />
</div>





In code behind:

- you will need to define your own VisibleDate property:

private DateTime VisibleDate
{
get
{
return ValidationHelper.GetDateTime(ViewState["VisibleDate"], DateTime.MinValue);
}
set
{
ViewState["VisibleDate"] = value;

}
}


- then insert following code to Page_Load method:


if ((Request.Form["__EVENTTARGET"] == NextButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "NextDate"))
{

setDate();

}
NextButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(NextButton, "NextDate");



- and create setDate() method:


private void setDate()
{

if (this.VisibleDate == DateTime.MinValue)
{
this.VisibleDate = DateTime.Today.AddMonths(1);

}
else
{
this.VisibleDate = this.VisibleDate.AddMonths(1);

}

Calendar.VisibleDate = this.VisibleDate;

}


Now you should have your own Next button.

Best regards,
Ivana Tomanickova

User avatar
Member
Member
eric.rovtar-hudsonchapel - 8/30/2010 9:27:41 PM
   
RE:CMSCalendar Control
Ok. I did what you said but when I click "Next", I get this error:
Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.


Also, I noticed you used Booking Events. Is there a reason for that? I'm just using a normal event type. Is that ok?

Thanks!

User avatar
Member
Member
eric.rovtar-hudsonchapel - 8/30/2010 9:32:44 PM
   
RE:CMSCalendar Control
Also, what's the difference between CMSCalendar and CMSEventCalendar. I can't find any documentation on the latter.

Thanks!

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 8/31/2010 5:43:37 AM
   
RE:CMSCalendar Control
Hi,

CMSCalendar is a control and CMSEventCalendar is a webpart containing CMSCalendar control and CMSrepeater control.

Could you please try to install Corporate Site aspx to see the CMSEventCalendar example? You can find it in ~/Events.

Source code is in
~/CMSTemplates/CorporateSiteAspx/Events.aspx and Events.aspx.cs

If you modify this template as described above, you should have functional Next button (please put only button control to .aspx page, CMS calendar control is already there).

Then you can modify this code according to your needs in your custom template (set transformation etc.).


Best regards,
Ivana Tomanickova


User avatar
Member
Member
eric.rovtar-hudsonchapel - 9/3/2010 11:47:56 AM
   
RE:CMSCalendar Control
Ok... this is great. I have my next and previous buttons working as you showed above.

Now I have this question: How can I make this work with an UpdatePanel. I'm using the EventCalendar WebPart, and I have UseUpdatePanel set to true, but the Prev & Next Buttons trigger full page postback.

Can you please show me how to modify the code you provided?

Also, on the initial page load, I still can't get the proper month that's being displayed. After the user clicks "Next" then the VisibleDate is correct, but not on the initial page loading. Ideas?

Thanks!

-Eric

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 9/7/2010 1:59:58 AM
   
RE:CMSCalendar Control
Hi,

Could you please verify if your Page_Load method is the same as mine. (for me is actual month displayed after page load and next one after clicking on Next button).


protected void Page_Load(object sender, EventArgs e)
{

if ((Request.Form["__EVENTTARGET"] == NextButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "NextDate"))
{

setDate();

}
NextButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(NextButton, "NextDate");

if ((CMSContext.CurrentDocument != null) && (CMSContext.CurrentDocument.NodeClassName.ToLower() == "cms.bookingevent"))
{
repEvent.Visible = true;
repEvent.Path = CMSContext.CurrentDocument.NodeAliasPath;

object value = DataHelper.GetDataRowValue(CMSContext.CurrentDocument.DataRow, mDatyField);
if (ValidationHelper.GetDateTime(value, DataHelper.DATETIME_NOT_SELECTED) != DataHelper.DATETIME_NOT_SELECTED)
{
Calendar.TodaysDate = (DateTime)value;
}
}
}


I used update panel following way and only part with calendar and button is refreshed:


<asp:UpdatePanel>
<asp:Button ID="NextButton" runat="server" Text="Next" />
<h1>
Calendar
</h1>
<div class="Calendar" >
<cms:CMSCalendar runat="server" ID="Calendar" Path="/Events/%" ClassNames="cms.bookingevent"
SkinID="EventCalendar" DayField="EventDate" TransformationName="cms.bookingevent.EventCalendarItem"
NoEventTransformationName="cms.bookingevent.calendarnoevent" EnableViewState="false" TimeZone="Inherit" />
</div>
<div class="EventDetail" >
<cms:CMSRepeater ID="repEvent" runat="server" Visible="false" ClassNames="cms.bookingevent"
SelectedItemTransformationName="cms.bookingevent.Default" EnableViewState="false">
</cms:CMSRepeater>
</div>
<uc1:EventRegistration runat="server" ID="EventRegistration" ContentBefore="<br /><hr />" EnableViewState="false" TimeZone="Inherit" />
</asp:UpdatePanel>


Best regards,
Ivana Tomanickova

User avatar
Member
Member
eric.rovtar-hudsonchapel - 9/8/2010 5:10:34 PM
   
RE:CMSCalendar Control
object value = DataHelper.GetDataRowValue(CMSContext.CurrentDocument.DataRow, mDatyField);


mDatyField isn't defined. Is it a typo?

Also, what's uc1:EventRegistration? What is that line doing?

Thanks!

-Eric

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 9/9/2010 2:23:34 AM
   
RE:CMSCalendar Control
Hi,

could you please add following line to your code (you can find it also in code behind on default Corporate site ASPX Events.aspx template):

protected const string mDatyField = "EventDate";

uc1:EventRegistration is an object of Event registration webpart.

You can find it on default Events.aspx template (~\CMSTemplates\CorporateSiteAspx\Events.aspx). If you do not want to use it on your site, you can remove this control.

Best regards,
Ivana Tomanickova

User avatar
Member
Member
eric.rovtar-hudsonchapel - 9/10/2010 1:08:51 PM
   
RE:CMSCalendar Control
Ok... so the calendar updates just fine, but it doesn't appear that the whole update panel does, and as such, the month doesn't update when you click next or previous.

if ((Request.Form["__EVENTTARGET"] == NextButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "NextDate"))
{
nextMonth();
}
NextButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(NextButton, "NextDate");

if ((Request.Form["__EVENTTARGET"] == PrevButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "PrevDate"))
{
prevMonth();
}
PrevButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(PrevButton, "PrevDate");

if ((CMSContext.CurrentDocument != null) && (CMSContext.CurrentDocument.NodeClassName.ToLower() == "cms.event"))
{
plEvent.Visible = true;
plCalendar.Visible = false;
}
else
{
plCalendar.Visible = true;
plEvent.Visible = false;

object value = DataHelper.GetDataRowValue(CMSContext.CurrentDocument.DataRow, mDatyField);
if (ValidationHelper.GetDateTime(value, DataHelper.DATETIME_NOT_SELECTED) != DataHelper.DATETIME_NOT_SELECTED)
{
Calendar.CalendarControl.TodaysDate = (DateTime)value;
}

//set month
month.InnerHtml = Calendar.CalendarControl.TodaysDate.ToString("MMMM");
}


<asp:UpdatePanel ID="uplCalendar" ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table id="tblCalendarHeader" cellpadding="0" cellspacing="0">
<tr>
<td class="tdCalendarMonth">
<h2 id="month" runat="server"></h2>
</td>

<td class="tdCalendarControls">
<asp:Button id="PrevButton" Text="<<" runat="server" />
<asp:Button id="NextButton" Text=">>" runat="server" />
</td>
</tr>
</table>

<cms:CMSEventCalendar ID="Calendar"
Path="%"
ClassNames="cms.event"
runat="server" />

</ContentTemplate>
</asp:UpdatePanel>


Ideas?

Thanks!

-Eric

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 9/24/2010 7:15:40 AM
   
RE:CMSCalendar Control
Hi,

could you please replace code of following files on default Corporate site? This code contains Next and Prev button and the actual month is displayed in <h2> control:

~/CorporateSiteAspx/Events.aspx.cs


using System;
using System.Web;

using CMS.CMSHelper;
using CMS.GlobalHelper;
using CMS.UIControls;

public partial class CMSTemplates_CorporateSiteASPX_Events : TemplatePage
{
protected const string mDatyField = "EventDate";


private DateTime VisibleDate
{
get
{
return ValidationHelper.GetDateTime(ViewState["VisibleDate"], DateTime.MinValue);
}
set
{
ViewState["VisibleDate"] = value;

}
}

protected void Page_Load(object sender, EventArgs e)
{
month.InnerHtml = DateTime.Today.Month.ToString();

if ((Request.Form["__EVENTTARGET"] == NextButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "NextDate"))
{

setDate();

}
NextButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(NextButton, "NextDate");

if ((Request.Form["__EVENTTARGET"] == PrevButton.UniqueID) && (Request.Form["__EVENTARGUMENT"] == "PrevDate"))
{

prevMonth();

}
PrevButton.OnClientClick = Page.ClientScript.GetPostBackEventReference(PrevButton, "PrevDate");

if ((CMSContext.CurrentDocument != null) && (CMSContext.CurrentDocument.NodeClassName.ToLower() == "cms.bookingevent"))
{
repEvent.Visible = true;
repEvent.Path = CMSContext.CurrentDocument.NodeAliasPath;

object value = DataHelper.GetDataRowValue(CMSContext.CurrentDocument.DataRow, mDatyField);
if (ValidationHelper.GetDateTime(value, DataHelper.DATETIME_NOT_SELECTED) != DataHelper.DATETIME_NOT_SELECTED)
{
EventCalendar.TodaysDate = (DateTime)value;

}
}

}

private void prevMonth()
{

if (this.VisibleDate == DateTime.MinValue)
{
this.VisibleDate = DateTime.Today.AddMonths(-1);

}
else
{
this.VisibleDate = this.VisibleDate.AddMonths(-1);

}

EventCalendar.VisibleDate = this.VisibleDate;
month.InnerHtml = this.VisibleDate.Date.Month.ToString();

}


private void setDate()
{

if (this.VisibleDate == DateTime.MinValue)
{
this.VisibleDate = DateTime.Today.AddMonths(1);

}
else
{
this.VisibleDate = this.VisibleDate.AddMonths(1);

}

EventCalendar.VisibleDate = this.VisibleDate;
month.InnerHtml = this.VisibleDate.Date.Month.ToString();

}
}




~/CorporateSiteAspx/Events.aspx.cs


<%@ Page Language="C#" MasterPageFile="Root.master" AutoEventWireup="true" CodeFile="Events.aspx.cs"
Inherits="CMSTemplates_CorporateSiteASPX_Events" ValidateRequest="false" %>

<%@ Register Src="~/CMSWebParts/Events/EventManager.ascx" TagName="EventRegistration"
TagPrefix="uc1" %>
<%@ Register Src="~/CMSWebParts/Viewers/Documents/cmsrepeater.ascx" TagName="repeater" TagPrefix="uc1" %>
<%@ Register Src="~/CMSWebParts/navigation/cmsbreadcrumbs.ascx" TagName="breadcrumbs"
TagPrefix="uc1" %>

<asp:Content ID="cntMain" ContentPlaceHolderID="plcMain" runat="Server">
<!-- Container -->
<div class="eventCalendarDetail">
<!-- Top zone -->
<div class="zoneTop">
<cms:WebPartContainer ID="wpcbreadcrumbs" runat="server" ContainerName="Box.Gray">
<uc1:breadcrumbs runat="server" ID="breadcrumbs" SelectNodesStartPath="" ClassNames="cms.bookingevent;CMS.MenuItem"
CacheMinutes="0" EnableViewState="false" />
</cms:WebPartContainer>
</div>
<!-- Left zone -->
<div class="zoneLeft" style="float: left;">
<asp:UpdatePanel>
<h2 id="month" runat="server"></h2>
<asp:Button id="PrevButton" Text="Prev" runat="server" />
<asp:Button id="NextButton" Text="Next" runat="server" />
<h1>
Calendar
</h1>
<div class="Calendar" >
<cms:CMSCalendar ID="EventCalendar" runat="server" Path="/Events/%" ClassNames="cms.bookingevent"
SkinID="EventCalendar" DayField="EventDate" TransformationName="cms.bookingevent.EventCalendarItem"
NoEventTransformationName="cms.bookingevent.calendarnoevent" EnableViewState="false" TimeZone="Inherit" />
</div>
</asp:UpdatePanel>
<div class="EventDetail" >
<cms:CMSRepeater ID="repEvent" runat="server" Visible="false" ClassNames="cms.bookingevent"
SelectedItemTransformationName="cms.bookingevent.Default" EnableViewState="false">
</cms:CMSRepeater>
</div>
<uc1:EventRegistration runat="server" ID="EventRegistration" ContentBefore="<br /><hr />" EnableViewState="false" TimeZone="Inherit" />
</div>
<!-- Right zone -->
<div class="zoneRight" style="float: right;">
<h1>
List of events
</h1>
Please select some event in the calendar on the left or you can choose the event
directly from the list below.
<br />
<br />
<div class="GeneralList">
<uc1:repeater runat="server" ID="EventRepeater" HideOnSubPages="True" Path="/Events/%"
ClassNames="cms.bookingevent" OrderBy="EventDate ASC" TransformationName="cms.bookingevent.preview"
PagingMode="querystring" PagerPosition="bottom" ResultsPosition="top" CacheMinutes="0"
ShowNewButton="True" NewButtonText="Add new event" ShowEditDeleteButtons="True" EnableViewState="false" TimeZone="Inherit" />
</div>
</div>
</div>
</asp:Content>



Best regards,
Ivana Tomanickova

User avatar
Member
Member
vinithapascal-gmail - 5/25/2011 5:23:52 AM
   
RE:CMSCalendar Control
Hi,

I want to have the "Event Registration Form" of Booking System in a separate page. I tried associating the EventManager.ascx file and created a new web part and added it in a page. But i see only a blank page. If i modify EventManager.ascx file, the changes are reflected but i want those things to be displayed in a separate page.

How can i customize the registration form of booking system?

Thanks,
Vinitha

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 5/26/2011 3:06:25 AM
   
RE:CMSCalendar Control
Hello,

the best way (and probably the easiest way) is having the Registration form on the Event detail page. This is the default scenario - in fact, the Registration form (~\CMSWebParts\Events\EventManager.ascx.cs) takes the event values from the current document which is the CMS.BookingEvent document type based one.

In case you want to have it on completely different and independent document, you need to customize that webpart by amending the way of obtaining the event details - moreover, you need to pass at least the DocumentID via the query string to that document and manage it via API in there.

Hope this makes sense.

Best regards
Ondrej Vasil

User avatar
Member
Member
vinithapascal-gmail - 5/26/2011 3:26:12 AM
   
RE:CMSCalendar Control
Hi,

Thanks for your inputs.

To be more clear, here are the details. I am able to display the list of events using CMSRepeater control. I am able to display the registration form in a separate page by modifying the code in EventManager.ascx file. Given below are the things that i am looking for.
1. Can i customize the data that is rendered in the repeater control like removing event description and adding images to each event?
2. On clicking event name, the page is navigated to Booking system, can i customize it to navigate to my own page?
3. Can i have a link to add events to the event calendar?

For now these are the things that i am looking for.

Thanks,
Vinitha

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 5/31/2011 3:46:06 AM
   
RE:CMSCalendar Control
Hello,

As for your quesions:

1 and 2) Both, the data and the event link can be customized within the Event calendar transformation. The default one looks like as follows so you can amend it as per your needs:
<div class="ContentEvent"><a href='<%# GetDocumentUrl() %>'><%# Eval("EventName", true) %></a></div>


3) This can be achieved via our User Contributions module: http://devnet.kentico.com/docs/devguide/user_contributions_overview.htm

Best regards
Ondrej Vasil

User avatar
Member
Member
vinithapascal-gmail - 5/31/2011 4:53:36 AM
   
RE:CMSCalendar Control
Hi,

Thanks for the response.

Can you help me out in explaining with an example? I am new to Kentico so need help.

Regards,
Vinitha

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 5/31/2011 6:06:11 AM
   
RE:CMSCalendar Control
Hello,

as for the Repeater's transformation(the default one from the Corporate Site sample site is CMS.BookingEvent.Preview):

<div class="Event">
<div class="Header">
<a href="<%# GetDocumentUrl() %>"><%# Eval("EventName", true) %></a>
</div>
<div class="Body">
<p><%# Eval("EventSummary") %></p>
<strong>Location: </strong><%# Eval("EventLocation") %><br />
<strong>Date: </strong><%# GetDateTimeString(Eval("EventDate"), true) %>
</div>
</div>
<br />


You can change it as shown here: Transformations

The same as above applies to the Event calendar control (it uses the CMS.BookingEvent.EventCalendarItem transformation shown in my previous reply).

You can edit both of them in Site Manager -> Development -> Document types -> Edit Booking event -> Transformations.

In case you are a newbie in Kentico CMS, I would recommend you to go through the following tutorials: ASPX templates tutorial and Portal Engine tutorial. Moreover, all the documentation is available on our Devnet portal.

Hope this helps.

Best regards
Ondrej Vasil