kalendar

Revamped version of my flat_calendar plugin. Now offers more features and easier customization.
Supports both custom and Google Calendar events.

Features

• Multiday events — Events can last for days and kalendar will show them correctly
• Google Calendar support — Include your calendarID and an APIkey and kalendar will show your google events as well.
• Customizable — Easy to change kalendar’s color with 4 predefined colorsets.
• Good performance — kalendar won’t use much of your precious power. Stuff are unloaded when it isn’t needed.

Customizations

• First day of the week — Default is monday but could be any day of the month
• Toggle daylabel
• Starting month/year — Decide which month you would like to display from start
• Color
• Eventhooks

FAQ

When I insert the calendar, all the days are stacked upon each other. Why?
There needs to be a height set on the calendar element since some inner elements use absolute positioning.

Usage

flat_calendar could be initialized with both HTML and JS, but I have discountinued developing with HTML support. flat_calendar is still available as a repo https://github.com/ericwenn/flat_calendar if you would like HTML support.
The reason for this is as the plugin grew more complex and more customizations were added initializing with HTML became harder. Both to write but also for me to parse.

So kalendar only supports JS initialization, and it is for the best.

First of all though, you have to import the .css and .js file to your project.

Simple kalendar

jQuery(".kalendar-element").kalendar();	

This will display a red, awesome but pretty useless calendar. No events, no customizations, no funnies.

Customized kalendar

When initializing your kalendar, include a set of options. These are all of the available:
Especially note the tracking variable

$('.example').kalendar({

	// Events are objects, placed inside of an array
	events: [
		{
			title: "Title of event",
			start: {
				date: YYYYMMDD or "YYYYMMDD",	// "20131230"
				time: "HH.MM"					// "12.00"
			},
			end: {
				date: YYYYMMDD or "YYYYMMDD",	// "20131230"
				time: "HH.MM"					// "20.00"
			},
			location: "Location",				// "London"
			url: "http://*.*",					// "http://example.com"
			color: "string"						// "red" string containing reference to the eventcolorsobject
		}
	],
	// Custom colorsets to set a specific color to an event. If one of the three variables isn’t set the inherit value will be used.
	eventcolors: {
		yellow: {
			background: "#FC0",					// Backgroundcolor, optional
			text: "#000",						// Text color, optional
			link: "#000"						// Link color, optional
		}
	}

	// Currently available colors are: red, blue, green, yellow. Red is the default.
	color: "blue",

	// Default is Monday, but any day of the week is applicable.
	firstDayOfWeek: "Sunday",

	// Google Calendar reference are objects, place inside of an array to support multiple calendars.
	// If you are unsure how to get an API-key visit: https://developers.google.com/google-apps/calendar/firstapp
	// If you are unsure how to get your calendar visit: https://support.google.com/calendar/answer/63962?hl=en
	googleCal: [{
		calendar: "calendarID",
		apikey: "APIkey"
	},
	{
		calendar: "calendarID",
		apikey: "APIkey"
	}],

	// Any name is possible, but note that not all names might fit in the UI

	monthHuman: [["JAN","January"],["FEB","February"], etc... ],

	// Regarding name lengths same applies here

	dayHuman: [["S","Sunday"],["M","Monday"], etc... ],

	// The text which represents links for events

	urlText: "View on Web",

	// Callbackevents will be fired when a certain criteria is met. The following are the currently supported events

	onInitiated: function() {},					// After the kalendar have been fully initiated. E.g when everything is loaded
	onGoogleParsed: function() {},				// After Google Calendar events, if they exist, have been parsed
	onMonthChanged: function() {},				// After events passed to the plugin have been parsed
	onDayShow: function() {},					// When a specific day have started to load. E.g when a day with an event attached to it is clicked
	onGridShow: function() {},					// When the grid of days have started to load. E.g when a specific dayview have been cancelled
	onDayClick: function(e) {}					// When a day gets clicked, no matter if it contains any event or not. Passed to this function is whether the day 												 is from this month or if it’s the current day. This can be accessed in the variable e.data.info

	// I decided to track people using this plugin in order to make it even better. 
	// The things I collect are current URL, color or kalendar, whether you decided to show days or not and your selected first day of the week.
	// Pass this variable as false and no tracking whatsoever will be done.
	// ***TRUE IS SET AS DEFAULT*** 
	tracking: true
});

Todo

• Reccuring events, both for Google Calendar but also custom ones.
• Add minified version
• Weeknumber

Changelog

v1.2.0 2014-01-08: Added callback events and colors for events.
v1.1.0 2014-01-04: Added links for events.
v1.0.0 2013-12-30: First version published, yay!

Thanks

I hope you will like using this plugin as much as I did creating it.
If you have any questions regarding this plugin, or just in general, please contact me.

Eric Wennerberg http://ericwenn.se https://twitter.com/ericwenn