This project is read-only.

Events Calendar - please help!

May 15, 2009 at 1:04 PM

Hello everyone.

I am using the my web pages starter kit as an engine to build a website for my small business.

What i really need is a calendar view for the events section. I saw a perfect example on the 'Club web site' starter kit, and wasn't sure
How easy it would be to convert (assuming that MWPSK uses XML data sources, and integration generally wouldn't be easy anyway).

What do you think would be the fastest way to implement such calendar view for the events?

thanks ahead,

YAT

Nov 29, 2009 at 8:00 PM

Hey YAT,

I am also looking for an event calendar. Have you gotten any responses??
Well, if you've found a way to implement this, or if you have any suggestions, let me know.

- PH

Nov 30, 2009 at 3:20 PM
YAT wrote:

...What do you think would be the fastest way to implement such calendar view for the events?...

Yat --

FWIW, if I were building it, I would start with a code sample like this one...

"

Building an Event Calendar Web Application

By Paul Apostolos

http://www.4guysfromrolla.com/articles/041603-1.aspx

"

HTH.

Thank you.

-- Mark Kamoski

Feb 14, 2010 at 9:36 PM
Edited May 15, 2010 at 2:15 PM

Hey YAT,

I used the following work-around implementation:

1) Add calendar control to the readonlyView segment in SectionControls/EventList.ascx
2a) Extend the updateViews() method in the codebehind page
2b) Add OnDayRender & OnSelectedDayChanged & OnMonthChanged methods to the codebehind
3) Extend App_code/Sections/EventList.cs with 2 public methods
4) Extend App_Themes/[YourTheme]/SectionStyles.css

Here's the code for part (1):

<asp:MultiView runat="server" ID="multiView">

...
<asp:View runat="server" ID="readonlyView"> <table> <tr> <!--PH_MOD start --> <td> <div id="divEventCalendar" class="calendarwrapper"> <asp:Calendar runat="server" CssClass="eventcalendar" ID="clEventList" ShowGridLines="True" DayNameFormat="Shortest" OnSelectionChanged="clEventList_SelectionChanged" OnDayRender="clEventList_DayRender" OnVisibleMonthChanged="clEventList_MonthChanged"> <SelectedDayStyle CssClass="cl_selecteddaystyle" ForeColor="#FFFFFF" /> <SelectorStyle CssClass="cl_selectorstyle" /> <TodayDayStyle CssClass="cl_todaydaystyle" ForeColor="#FFFFFF" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <DayStyle Wrap="true" /> <NextPrevStyle CssClass="cl_nextprevstyle" ForeColor="#FFFFCC" /> <DayHeaderStyle CssClass="cl_dayheaderstyle" /> <TitleStyle CssClass="cl_titlestyle" BackColor="#960000"/> </asp:Calendar> </div> <br /> </td> </tr><!--PH_MOD End --> <tr> <td> <asp:CheckBox runat="server" ID="chkShowPastEvents" Text="<%$ Resources:stringsRes, ctl_EventList_ShowPastEvents %>" Checked="false" AutoPostBack="true" Visible="false"/> <asp:GridView runat="server" DataKeyNames="Guid" ID="gvEventList" AutoGenerateColumns="false" OnRowCommand="gvEventList_RowCommand" OnRowDataBound="gvEventList_RowDataBound" Visible="false"> <Columns> ... (the rest is unchanged)
Here's the code for part (2a):
public partial class SectionControls_EventList : SectionControlBaseClass
{
    private EventList _section;
    private DataView _clDataView; //#PH_MOD
...
if (ViewMode == ViewMode.Edit)
{
 ..
}
else
{
    multiview.SetActiveView(readonlyView);

    // #PH_MOD
    _clDataView = _section.GetEventEntriesForCalendar();

    // #PH_MOD gvEventList.DataSource = _section.GetEventEntriesReadonly(chkShowPastEvents.Checked); ; 
    // #PH_MOD gvEventList.DataBind();

    DataRow entry = null;
    ... (the rest is the unchanged)
Here's the code for part (2b):
// #PH_MOD
protected void clEventList_DayRender(object sender, DayRenderEventArgs e)
{
    DataView dv = new DataView(_clDataView.ToTable());

    // For each rendered day in current month find the related event(s)
    dv.RowFilter = string.Format("EventDate >= #{0}# AND EventDate < #{1}#",
            e.Day.Date.ToString("MM/dd/yyyy"), e.Day.Date.AddDays(1).ToString("MM/dd/yyyy"));
    if (dv.Count > 0)
    { // Event found
         string strContent = "<br><div style=\"text-align:center; height:1px; font-size:11px; color:Green\">";
         strContent += Resources.StringsRes.ctl_EventList_Event + ": " + dv.Count + "</div>";
         e.Cell.Controls.Add(new LiteralControl(strContent));
    }
}

// #PH_MOD
protected void clEventList_SelectionChanged(object source, EventArgs e)
{
    DataView dv = _section.GetEventEntriesForCalendar(((Calendar)source).SelectedDate);

    // If current day contains event(s), show them in a grid        
    if (dv.Count > 0)
    {
        gvEventList.DataSource = dv;
        gvEventList.DataBind();
        gvEventList.Visible = true;
        gvEventList.Focus();
        if (divEventDetails != null && divEventDetails.Visible) // Make clean switch between two dates with events 
        {
            divEventDetails.Visible = false;
            ViewState["detail"] = null;
        }
    }
    else
    {
        if (divEventDetails != null && divEventDetails.Visible)
            divEventDetails.Visible = false;
        ViewState["detail"] = null;
        gvEventList.Visible = readonlyPager.Visible = false;
    }
}

// #PH_MOD
protected void clEventList_MonthChanged(object source, MonthChangedEventArgs e)
{
    ((Calendar)source).SelectedDate = e.NewDate;
    clEventList_SelectionChanged(source, new EventArgs());
}
Here's the code for part (3):
// Returns a DataView with all events pertaining to the next 3 months
public DataView GetEventEntriesForCalendar() // #PH_MOD
{
    DateTime dtStartOfMonth = DateTime.Today;

    // Set date to the 1st of the month
    if (dtStartOfMonth.Day != 1)
      dtStartOfMonth = dtStartOfMonth.AddDays(-(dtStartOfMonth.Day - 1));

    string DateStart = dtStartOfMonth.ToString("MM/dd/yyyy");
    string DateEnd = dtStartOfMonth.AddMonths(3).ToString("MM/dd/yyyy");

    return new DataView(EventEntries, string.Format("EventDate >= #{0}# AND EventDate < #{1}#", DateStart, DateEnd), "EventDate ASC", DataViewRowState.CurrentRows);

}

// Returns the event(s) pertaing to the specified date
public DataView GetEventEntriesForCalendar(DateTime selDate) // #PH_MOD
{
    string DateStart = selDate.ToString("MM/dd/yyyy");
    string DateEnd = selDate.AddDays(1).ToString("MM/dd/yyyy");

    return new DataView(EventEntries, string.Format("EventDate >= #{0}# AND EventDate < #{1}#", DateStart, DateEnd), "EventDate ASC", DataViewRowState.CurrentRows);
}
And the last part (css file):
/*PH_MOD-start*/
div.calendarwrapper  
{
    width: 420px;
}

.eventcalendar
{
    background-color: #FFFFCC; height: 320px; width: 100%;
}

.cl_titlestyle
{
    background-color: #960000; color: #FFFFFF; font-weight: bold;
    font-size: 9pt;
}

.cl_dayheaderstyle
{
    background-color: #FFCC66; color: #000080; height: 1px;
    font-weight: bold;
}

.cl_selecteddaystyle
{
    background-color: #339966; font-weight: bold;
}

.cl_todaydaystyle
{
    background-color: #FFCC66;
}

.cl_nextprevstyle
{ 
    font-size: 9pt;
}
/*PH_MOD-end*/
That's it. It works.
Future mods to include viewstate/session usage.
Hope that this workaround helps you.
Apr 9, 2010 at 6:05 PM

Hi YAT I just created a new post regarding this. This is one of the biggest problems I've been having is creating a calendar that functions as you have stated.
Thanks DaPhenomenon I will try this and see what happens. I hope it works :) 

 

 

 

 

Apr 9, 2010 at 7:13 PM

Hey UptownGirl,
Keep me posted.

Apr 9, 2010 at 8:57 PM

Hi DaPhenomenon I tried adding the code but I ran into an error. Did you experience this error below when you added your code on the backend? I'm not sure why the _clDataView would not exist. I'm going to start over and try putting the code in again to see what happens.  Thanks :)

 

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS0103: The name '_clDataView' does not exist in the current context

Source Error:

 

Line 193:    protected void clEventList_DayRender(object sender, DayRenderEventArgs e)
Line 194:    {
Line 195:        DataView dv = new DataView(_clDataView.ToTable());
Line 196:
Line 197:        // For each rendered day in current month find the related event(s)
 

Source File: c:\Documents and Settings\azizah\Desktop\Website backups\Update Praa\SectionControls\EventList.ascx.cs    Line: 195 
Apr 9, 2010 at 10:14 PM

My bad ! :S

This pieace is missing from part 2a):

public partial class SectionControls_EventList : SectionControlBaseClass
{
    private EventList _section;
    private DataView _clDataView; //#PH_MOD

// Note: it's in "SectionControls/EventList.ascx.cs"

Apr 12, 2010 at 8:10 PM

DaPhenomenon I think I'm close but once I added the missing piece I got this below. So possibly it is pointing to a reference that is null.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 56:     protected void clEventList_DayRender(object sender, DayRenderEventArgs e)
Line 57:     {
Line 58:         DataView dv = new DataView(_clDataView.ToTable());
Line 59: 
Line 60:         // For each rendered day in current month find the related event(s)
May 15, 2010 at 2:52 PM

Hey UpTownGirl27,

Code has been updated & tested on a clean CMS(website).
Have fun with it.