Options

containerId – default: #jMonthCalendar

Use this to configure where your calendar should be placed in the page. You must have a matching DOM element with the ID

$.jMonthCalendar.Initialize({ containerId: '#MyContainerId' }, null);

headerHeight – default: 50

This sets the height of the navigation header.

$.jMonthCalendar.Initialize({ headerHeight: 50 }, null);

firstDayOfWeek – default: 0

This determines which day of the week weeks should start on (default 0 refers to sunday). Monday is 1, Tuesday is 2, etc.

$.jMonthCalendar.Initialize({ firstDayOfWeek: 1 }, null);

calendarStartDate – default: new Date()

This determines which month to display when the calendar is first loaded. The default is to start in the current month (today).

$.jMonthCalendar.Initialize({ calendarStartDate: new Date(2009, 1, 1) }, null);

dragableEvents – default: true

This determines weather or not you want event blocks to be dragable. Note this depends on jquery.ui.dragable.

$.jMonthCalendar.Initialize({ dragableEvents: false }, null);

dragHoverClass – default: ‘DateBoxOver’

This is the css class that is added when an element is being hovered over an acceptable date cell.

$.jMonthCalendar.Initialize({ dragHoverClass: 'SomeCssClass' }, null);

navLinks (object of values)

These are the label text and switches to determine the header navigation.

$.jMonthCalendar.Initialize({ 	
	navLinks: {
		enableToday: true,
		enableNextYear: true,
		enablePrevYear: true,
		p:'‹ Prev', 
		n:'Next ›', 
		t:'Today',
		showMore: 'Show More'
	}
}, null);

Events

onMonthChanging

This event is triggered upon changing the calendar’s month. If the callback function returns false, the change will be prevented. Note: this would be an excelent point to do an AJAX call for the next months events.

// supply this callback as an option with the collowing signature
$.jMonthCalendar.Initialize({
    onMonthChanging(newDate) { ... }
}, null);
 
// AJAX call sample for more events
$.jMonthCalendar.Initialize({
    onMonthChanging(newDate) { 
 
    }
}, null);

onMonthChanged

This event is triggered after calendar’s month has been changed.

$.jMonthCalendar.Initialize({
    onMonthChanged(event, newDate) { ... }
}, null);

onEventLinkClick

This event is triggered when the anchor tag of the event is clicked. Note: good place to link out to another page.

$.jMonthCalendar.Initialize({
    onEventLinkClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockClick

This event is triggered when the div container of the event is clicked. Note: this our the link click would be a good place to show tooltips.

$.jMonthCalendar.Initialize({
    onEventBlockClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockOver

This event is triggered when your mouse is over the event div container.

$.jMonthCalendar.Initialize({
    onEventBlockOver(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockOut

This event is triggered when you mouse moves off the event div container.

$.jMonthCalendar.Initialize({
    onEventBlockOut(event) { 
        alert(event.data.Event);
    }
}, null);

onDayLinkClick

This event is triggered when the user clicks on the label of the day (number in upper right corner)

$.jMonthCalendar.Initialize({
    onDayLinkClick(event) { 
        alert(event.data.Date);
    }
}, null);

onDayCellClick

This event is triggered when the user clicks on the cell that contains the event div containers.

$.jMonthCalendar.Initialize({
    onDayCellClick(event) { 
        alert(event.data.Event);
    }
}, null);

onDayCellDblClick

This event is triggered wehn the user double clicks ont eh cell that contains the event div containers.

$.jMonthCalendar.Initialize({
    onDayCellDblClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventDropped

This event is fired after a user drags and drops and event onto a new day.

$.jMonthCalendar.Initialize({
    onEventDropped(event, calEvent, newDate) { 
        alert(calEvent);
        alert(newDate);
    }
}, null);

onShowMoreClick

This event is triggered when the user wishes to “see more” events than what can be displayed in the cell. Note: this would be a good place to use a tooltip or dialog as well.

$.jMonthCalendar.Initialize({
    onShowMoreClick(dayEvents) { 
        // dayEvents is an array of events 
        alert(dayEvents.length);
    }
}, null);

Methods

Initialize(options, eventArray)

This is the main method needed to be called to get a calendar on the page. You can initialize it with the options and event callbacks mentioned above to get a more custom plugin.

$.jMonthCalendar.Initialize({ containerId: '#MyContainerId' }, []);

ChangeMonth(newDate)

This method will change the current selected month of the calendar. This method will fire the callback onMonthChanging and onMonthChanged.

$.jMonthCalendar.ChangeMonth(new Date(2009, 1, 1));

ReplaceEventCollection(eventArray)

This will replace all events in the plugin with the new event array passed in. This will clear all existing events being displayed and redraw all the events after the replacement.

$.jMonthCalendar.ReplaceEventCollection([]);

AddEvents(eventArray)

This method will add a single event to the plugin or an array of events by merging into the existing array of events. After which the method will clear all visible event on the calendar and draw the events in the updated array.

$.jMonthCalendar.AddEvents([]);

ClearEventsOnCalendar()

This method will remove all the events in the plugin and and remove any being displayed.

$.jMonthCalendar.ClearEventsOnCalendar();

Download location: jMonthCalendar-1.3.2-Beta

The biggest change in this release is how events are handled. Before I was not passing the DOM event back to you for control, I was simply just calling the methods you configured as options and passing parameters. Now, the original DOM event is bubbled up to the custom event in most cases. Along with the original DOM event I am also stuffing in the custom data for the callback into the jQuery event object.

jQuery provides a nice way of encapsulating the original DOM event into a jQuery event object. A property on that object is ‘data’ (which can be waht ever I want). So now, all custom events are mostly passed one single parameter (with the exception of onMonthChanging and onShowMoreClick); the jquery typed event. Inside that event object I have put the data I want to send back, like the date or event object clicked on. Don’t worry I will get to a sample of what I am talking about.

First I will start off by showing you the old way of doing it prior to this release.

OLD Way

$().ready(function() {
    var options = {
        onMonthChanging: function(dateIn) {
            // this could be an Ajax call to the backend to get this months events
            alert("on month changing");
            // $.jMonthCalendar.ReplaceEventCollection(events);
        },
        onEventLinkClick: function(calEvent) { 
            // calEvent will be the calendar event you clicked on
            alert("event link click");
            return true; 
        },
        onDayLinkClick: function(dateIn) { 
            // date might be wrong here, held reference from last item
            alert(dateIn.toLocaleDateString());
        }
    };
 
    $.jMonthCalendar.Initialize(options, []);
});

Okay, so the obvious problem with that is that there is no way to get to the original DOM event.

NEW recommended Way

$().ready(function() {
    var options = {
        onMonthChanging: function(dateIn) {
            // this could be an Ajax call to the backend to get this months events
            alert("on month changing");
            // $.jMonthCalendar.ReplaceEventCollection(events);
        },
        onEventLinkClick: function(event) { 
            // event is the jQuery event passed
            alert("event link click");
            // can get to the actual calendar event now through the Data property
            alert(event.data.Event);
            // want to prevent event bubbling use:
            event.stopPropagation();
        },
        onDayLinkClick: function(event) { 
            alert(event.data.Date.toLocaleDateString());
        }
    };
 
    $.jMonthCalendar.Initialize(options, []);
});

Getting started with jMonthCalendar is really quite easy, it is like any other Javascript library or jQuery plugin in that it requires a Javascript file and reference in the page.

Step 1 – Download

Well you will first need a copy of jQuery if you don’t already have one, I recomend jQuery 1.3.2 which can be found here, you either want the uncompressed version or the compressed version depending on your preferences.

You will will also need a copy of jMonthCalendar which can be downloaded here. The download contains the Javascript files, a sample html page, and some default css (which can be changed to suit your needs).

Step 2 – Include in Html

After the files are downloaded you will want to move them to a directory in your project/website that can be references either relativley or absolutly. You’ll want to include a reference to the jQuery file you downloaded as well as the jMonthCalendar plugin. You can place these references in the head of the html or the body, with Javascript it is all the same. You’ll want to put these two line in your html document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/jMonthCalendar.js" type="text/javascript"></script>

If you want to use the default styles now is the time to either copy the contents of the core.css (from the jMonthCalendar download) into your css file or include a reference in the head like so:

<link rel="stylesheet" href="css/core.css" type="text/css" />

Step 3 – Create place holder in the Html body

In order to draw the calendar on to the page, the plugin needs to know where to put it. Add and empty div tag someplace in the body of the html like so: (The ID of the div is VERY important, you can change the ID but you must tell the plugin what it should look for through the options.)

<div id="jMonthCalendar"></div>

Step 4 – Initialize calendar on page load.

To draw the calendar after the page has loaded you will need to hook up that standard jQuery onLoad event. This usually happens once on the page and is surrounded in a script block at either the top or the bottom of the page. The safest place to do this is with another script block right after step 2. This will create the calendar and draw it on the screen using the empty div you created in step 3.

<script type="text/javascript">
    $().ready(function() {
	$.jMonthCalendar.Initialize(null, null);
    });
</script>

Thats it! That is all you need to do in order to display the calendar on te page. There are of course configurable options and events that you can tie into to perform advanced operations but I will save that for another post. The next topic I will cover is, “okay now what…”, how to load events into the calendar.

Update: Added the first bits of documentation for the plugin here.

Change Log

• Events that span multiple days with continuation over days, weeks, months, years.
• jQuery 1.3.2 Support
• Events are now pre-sorted for multi day events on top.
• “Show More Events” setting/hoot that passes the days worth of event object as an array.
• Start of jQuery UI theme support, arrows for spanning events.
• Removed initialize for static height and width, now all set on the main calendar using CSS (everything else is dynamic).
• Note: you must specify an EventID in the event objects, they are required now.

The biggest change to this release is the fact that multi-day events are being drawn now. In order to add this I had to make a huge amount of changes under the hood and thus I am adding a Beta to the release to warn people.  At the same time I want to see how it behalves for people and fix any issues people might have.

In the last release events were being appended into the table cell tag of the specified day. This created huge problems as you can’t do a column span on the event easily, plus how are you supposed to handle overflow and events that wrap over weeks or months. So I chose to rewrite how the events were drawn and make them absolutely positioned. I also added an object for each day on the calendar and set some properties, that made it a lot easier to reference the object from an array and grab the days worth of events.

Some people may look into this and think that I have missed how to display “More Events” (events that overflow the day). I have left this out and added a hook instead. I was unable to settle on an implementation and with so many other good balloon pop ups, I thought I would leave it up to you. There is a new hook called onShowMoreClick that passes an array of events to it. The array of events is a representation to all the events for that day, including the non-visible ones. I hope to provide a series of usage posts on how this might be done using my favorite plugins.

One last piece of information is regrading drag and drop events. They are supported with multi-day events even. They will fire the same hooks as in the past: onEventDropped (passing the event and the new date).

Please let me know what you think in the comments, I am very proud of where this plugin has come so far and hope to keep pushing it’s feature set. If you experience any issues please feel free to leave a comment, email, or better yet; file an issue over at the Google Code Home page.

Download jMonthCalendar 1.3.0 Beta:

jmonthcalendar-130-beta Direct Download

Google Code

My Case: I have been building console application that will run nightly to sync some integration records and I wanted to setup logging in order to see that status of the job and gather some reporting information (counts, time run, etc).  There was a catch though this process would run multiple times in a night but each time for a different customer.  This would make it difficult to read the logs for a particular customer as all I would have to go on is the file date and time.

I needed a way to break my log files into different customers yet retain the rolling file appender features of log4net.  My first pass at with was to configure log4net using the basic configurator all in code and create the appender, with a dynamic file name, and set the level of the logger programitacally. This was not my preferred way but was my only hope to getting the application out of developement. Then I found how to set properties into log4net’s global context and access them through the configuration file. I did run into a small problem that my app.config file was not being read in so I had to add these two variable to my assembly.

[assembly: log4net.Config.XmlConfigurator(Watch = true)]
[assembly: log4net.Config.Repository]

My goal was to make the file name dynamic based on the CustomerID passed into the application. Please not the file tag as it is the ticket to my case.

<log4net>
    <root>
        <level value="INFO" />
        <appender-ref ref="RollingLogFileAppender" />
    </root>
 
    <!-- New Log File once per execution -->
    <appender name="RollingLogFileAppender" type="log4net.Appender.RollingFileAppender">
        <file type="log4net.Util.PatternString" value="logs\logFile_%property{BrokerID}.txt" /> <!-- Awesomeness -->
        <appendToFile value="false" />
        <rollingStyle value="Size" />
        <maxSizeRollBackups value="-1" />
        <maximumFileSize value="50GB" />
        <layout type="log4net.Layout.PatternLayout">
            <conversionPattern value="%date [%thread] %-5level %logger - %message%newline" />
        </layout>
    </appender>
</log4net>

Here is a sample of my log4net configuration section. Please note the file tag and type attribute to be log4net.Util.PatternString. The pattern of the value is important to, it must be %property{property_name} to get the right replacement. This is the ticket to dynamic values.

private static void InitLogger()
{
    //This is freaking awesome, put a property into the log4net context and using the 
    //  log4net.Util.PatternString type you can dynamically set values for the logging context from code.
    log4net.GlobalContext.Properties["CustomerID"] = (CustomerID!= 0) ? CustomerID.ToString() : "Error";
}

Here is an example of my small InitLogger. This method is the very first item to be called when the main routine starts up. All that needs to be done now is get a logger and start logging. A file will be created based on the CustomerID which in this case is retrieved from the command line arguments before InitLogger is called. If no CustomerID is passed in than the file will be to logFile_Error.txt

private static ILog Logger;
 
static void Main(string[] args)
{
    if (args.Length > 0)
        CustomerID= Util.GetInt(args[0]);
 
    InitLogger();
    Logger = LogManager.GetLogger("Process");
}

Pretty cool I think, I hope this saves people some headaches. I wish I would have found this a few days ago. Oh well it is to my benefit to learn. Happy coding.

Typemock is launching a new product for ASP.NET developers – the ASP.NET Bundle – and for the launch will be giving out FREE licenses to bloggers and their readers.

The ASP.NET Bundle is the ultimate ASP.NET unit testing solution, and offers both Typemock Isolator, a unit test tool and Ivonna, the Isolator add-on for ASP.NET unit testing, for a bargain price.

Typemock Isolator is a leading .NET unit testing tool (C# and VB.NET) for many ‘hard to test’ technologies such as SharePoint, ASP.NET, MVC, WCF, WPF, Silverlight and more. Note that for unit testing Silverlight there is an open source Isolator add-on called SilverUnit.

The first 60 bloggers who will blog this text in their blog and tell us about it, will get a Free Isolator ASP.NET Bundle license (Typemock Isolator + Ivonna). If you post this in an ASP.NET dedicated blog, you’ll get a license automatically (even if more than 60 submit) during the first week of this announcement.

Also 8 bloggers will get an additional 2 licenses (each) to give away to their readers / friends.

Go ahead, click the following link for more information on how to get your free license.

New Features:

• Dragable Events support using jQuery UI (Optional usage).
• Add ability to enable or disable calendar links (today link, next year, and previous year).
• Default Next and Previous link text changed.
• Added onDayCellDblClick event that passes the date you are double clicking.
• Added onEventDropped event that passes the event object and the new date being dropped into.
• Removed my custom Date extensions and replaced it with Datejs, more on this below.
• Complete Build Process to build, pack and minify the source.

The drag and drop stuff is pretty cool and makes the calendar even slicker. Have to provide props to the reader (Mattias Jakobsson) who took it upon their own to add it in. With the addition of the event when the event is dropped this would allow a developer to update an event using AJAX, allowing the user to easily reorganize events. jQuery UI is not a dependency and this feature is totally optional.

As for the date extension stuff, it was not something I wanted to maintain, and didn’t use that often. I hope to add another option in the setup to allow for a date parsing options on the inbound JSON.

Another item I am proud of is a unified build process. I wanted to make releases as easy as possible so I thought I would spend some time learning ANT and looking at other scripts (jQuery, Dojo, and other projects for JavaScript). I managed to write a pretty neat ANT script that will produce all the artifacts for a release and zip it up. I will save the details for another post.

The last point I will mention is now the ability to override the navigation links and turn them on or off depending on your usage. This was asked for and was a simple addition to source. If you have any suggestions, send them along I will add them in to the source if I feel they fit the project goal. Below is an updated definition of all the options available for the plugin.

FYI: The next release will make a change in how the calendar is sized and will absolutely position events over the calendar for Multi Day Event capabilities.

var defaults = {
	height: 650,
	width: 980,
	navHeight: 25,
	labelHeight: 25,
	firstDayOfWeek: 0,
	calendarStartDate:new Date(),
	dragableEvents: false,
	activeDroppableClass: false,
	hoverDroppableClass: false,
	navLinks: {
		enableToday: true,
		enableNextYear: true,
		enablePrevYear: true,
		p:'‹ Prev', 
		n:'Next ›', 
		t:'Today'
	},
	onMonthChanging: function(dateIn) { return true; },
	onMonthChanged: function(dateIn) { return true; },
	onEventLinkClick: function(event) { return true; },
	onEventBlockClick: function(event) { return true; },
	onEventBlockOver: function(event) { return true; },
	onEventBlockOut: function(event) { return true; },
	onDayLinkClick: function(date) { return true; },
	onDayCellClick: function(date) { return true; },
	onDayCellDblClick: function(dateIn) { return true; },
	onEventDropped: function(event, newDate) { return true; },
	locale: {
		days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
		daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
		daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
		months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
		monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
		weekMin: 'wk'
	}
};

A few weeks ago I started down the path of setting up a new server/host using SliceHost for the purpose of installing a Subversion server and a RoR application Redmine. They are great, I can’t speak anymore highly of their product.  Everything got setup and installed perfectly as expected. I got the RoR app up quickly using Phusion Passenger which saved me a ton of pain.

Unfortunately I went to sleep worrying about how I was going to manage an application, open source project and still keep a secure Subversion repository and server while still being able to develop. The other night I decided I would save some and make by life simpler by moving the project over to code.google.com and ditch my slice.  Google Code will, now going forward, provide jMonthCalendar a project home, wiki, issues, downloads and Subversion source control. It currently allows anonymous Subversion browsing and the ability to add members to the project for collaborative development. Google code offers everything I would need for an open source project, allowing me to focus on the fun stuff, coding. Along with the new project home I also created a Google Group (found below) for open discussion, support, suggestions, etc. Please feel free to stop buy and check it out.

Comments and suggestions will be greatly appreciated, also if you are currently using jMonthCalendar please let me know, I would love to feature/link your site on the home page.  Happy Coding.

If you are interested in jMonthCalendar or looking for the new details, please see below.
Latest Release: jMonthCalendar 1.2.1 (bug fixes)
Downloads: http://code.google.com/p/jmonthcalendar/downloads/list
Project home: http://code.google.com/p/jmonthcalendar/
Google Group: http://groups.google.com/group/jmonthcalendar
Source Code: http://code.google.com/p/jmonthcalendar/source/list

• Today Link (navigate back to today’s date)
• Year navigation, jump to ‘10 or back to ‘08 in the active month
• Ability to click a day cell or day link and fire your own custom logic (i.e. add event on that day)
• JSON date parsing, parse what some from that event object if the calendar is un-aware.
• Fixed in-line sizing, configurable by options conscruct
• Deprecating Date property, replaced by StartDate
• Added EndDate property to event object

While not all of all of them seem flashy, the last three or four points make the calendar that much closer to having multi-day events and event overflow support.

I am happy to report that I am currently using the calendar on an ASP.Net MVC site on my development machine.  I hope to have a new calendaring system ready soon.  This should concern you only because when I find issues while developing and using it, I fix them and everyone benefits.  In more detail my calendar does a JSON GetData call to a controller actions, which executes and returns JSON formatted events.  I am using James Newton-King’s JSON.Net library to map and serialize my C# objects.  I use the attributes on my properties to rename or exclude them from serialization.  Very nice library and commend James for the work.

//Before, (notice the lack of quotes to identify the property)
var events = [
    { EventID: 1, "Date": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", URL: "#" },
    { EventID: 2, "Date": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", URL: "#" }
];
 
//After: new properties and quotes property strings (better JSON)
var events = [ 
    { "EventID": 1, "Date": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
    { "EventID": 2, "Date": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
];

The new properties will allow for two things. One, the CssClass is placed onto the event block so that it can be styled with css easily. This could also be used like an event type or category. Second, the description allows for a more information, this is in conjunction with the feature below.

An exciting new feature for some is the ability execute custom code (extension point) when hovering over/out an event. This will provide the ability to do something with the hovered event, like display a ballon/pup-up. The new feature is part of the options construct so it should be define like the example below.

var options = {
    onEventBlockOver: function(event) {
        //of course this is rude example but you could to anything here and pass property values to it.
        //Example, you could create UI ballon and display (set the scope higher) then destroy or close it on out.
        alert(event.Title + " - " + event.Description);
        return true;
    },
    onEventBlockOut: function(event) {
        return true;
    }
};

This was my solution to a comment that someone wanted balloon like pop-ups. I didn’t want to have to mess with that since it deals with positioning and calculations that I am not comfortable with spending the time on it now. My continued goal of this project is to avoid dependencies, with the exception of jQuery sponsored projects.

Please keep up the comments for suggestions, issues, requested features, and anything else you think I might like. Thanks for the support.