CS: Date Chooser TinyMCE Plugin

The calendar component for Community Server is great.  It allows the integration of the forum posts and calendar events.  You can create an event about about the "Party at Joe's" and then the discussion of who brings the party supplies can occur on the forum.  Dan even provided an extension to FreeTextBox that enables a date chooser dialog.  The only issue is that CS now uses TinyMCE as the editor and the latest version of FTB so that Dan's extension no longer works.  So I created a Date Chooser plugin for TinyMCE to solve this problem.

Download it here - see Readme.txt for install instructions.  Read on for some implementation details.

Since I needed a modal dialog just like the content selector in CS I started by copying and renaming the directory for that plugin.  I also copied the image for the date picker out of Dan's FTB extension.  Once armed with these two pieces of the puzzle I did the following.

Edit editor_plugin.js to refer to DatePicker instead of ContentSelector where relevant and change the implementation of the open and addContent methods in the date picker class.  The code looks like this:

execCommand : function(editor_id, element, command, user_interface, value) 
{ 
    switch (command) { 
        case "csDatePicker": TinyMCE_DatePickerPlugin._openDatePicker(editor_id);
        return true; 
    } // Pass to next handler in chain 
    return false; 
}, 
_openDatePicker : function(editor_id) { 
    TinyMCE_DatePickerPlugin._currentEditor = tinyMCE.getInstanceById(editor_id);
    TinyMCE_DatePickerPlugin._currentBookmark = this._currentEditor.selection.getBookmark();
    Telligent_Modal.Open('/calendar/MCEDatePicker.aspx', 400, 250, this._addContent);
}, 
_addContent : function(content) 
{ 
    if (content != null) 
    { 
        TinyMCE_DatePickerPlugin._currentEditor.selection.moveToBookmark(this._currentBookmark);
        TinyMCE_DatePickerPlugin._currentEditor.execCommand("mceInsertRawHTML",false, content); 
    } 
}

The main things to note are line third line of _openDatePicker and last line of code in _addContent.  The modal dialog is loaded in the _openDatePicker method with a size and a callback of the _addContent function.  In the _addContent method we actually take the content from the dialog and insert it in the editor pane of the current post.

MCEDatePicker.aspx is not very interesting.  It contains a Generic control that loads the MCEDatePickerModal.ascx skin.  This file is much more interesting. The first thing to examine is the markup:

<div align="center" style="padding: 10px">
    <CA:Calendar runat="server" ID="Calendar1" SelectedDate='<%# DateTime.Today %>'
        CalendarCssClass="calendar" DayCssClass="day" DayHoverCssClass="dayhover"
        SelectedDayCssClass="selectedday" ShowNextPrev="true" 
        NextImageUrl='<%#CommunityServer.Components.Globals.GetSkinPath() + "/images/calendar/next_wht.gif" %>' 
        PrevImageUrl='<%# CommunityServer.Components.Globals.GetSkinPath() + "/images/calendar/prev_wht.gif" %>'> 
    </CA:Calendar> 
</div> 
<div align="right"> 
    <asp:Button ID="bSelect" runat="server" Text="Select Date" OnClientClick="ReturnDate()" /> 
    <asp:Button ID="bCancel" runat="server" Text="Cancel" OnClientClick="window.parent.Telligent_Modal.Close(null);" /> 
</div>

This code displays a ComponentArt Calendar control and a couple buttons that act on the control.  We end up with this modal dialog that allows you to pick a date from the calendar view.

The _addContent callback implemented above will run when the modal dialog is closed. It is closed with the following code which is renedered to the client as the page is loaded:

function ReturnDate() 
{ 
    var newDate = Calendar1.ClientID.FormatDate(Calendar1.ClientID.GetSelectedDate(), '[cal]MM-dd-yyyy[/cal]'); 
    if(newDate.length > 0) 
        window.parent.Telligent_Modal.Close(newDate); 
    else 
        window.parent.Telligent_Modal.Close(null); 
} 

As you might guess when looking at this code Calendar1.ClientID doesn't exist in the client code. This bit of javascript is dynamically created on the server and registered as a script block using the ClientID property.  The key thing to note in this code is the call to the Telligent_Modal.Close() function.  When called, this will in turn run the callback specified for the modal when it was opened - inserting the date into the editor.

The last piece of the puzzle requires adding the calendar button to the interface.  Part of this is setup in editor_plugin.js and part of it is done by changing the skin used for the editor.  In the Editor-Standard and Editor-Enhanced skin files, the 'datepicker' plugin was added to the plugins and theme_advanced_buttons1_add options on the editor control.

Many thanks to my employer (ATGi) since I developed this on work time.