User Guide

Overview

The wijevcal widget is a fully functional schedule that allows users to add, edit, and manage their appointments. By default the wijevcal uses an offline data source, so you can easily add this widget to your page without additional configuration.

The following image highlights some of the wijevcal elements:

NOTE: Please check the version histories for an outline of new features, improvements, and changes to the Wijmo widgets.

Markup and Scripting

Markup for a wijevcal looks like this:

<div id="eventscalendar"></div>

The following script initializes the wijevcal widget:

<script type="text/javascript">
    	$(document).ready(function () {
    		$("#eventscalendar").wijevcal();
    	});
</script>

The markup and script featured here results in the following:

Quick Start

This quick start helps you to create a Web page, add the wijevcal widget, and customize the appearance and behavior of the widget.

In Notepad, to create a new HTML page, add the following code and save the document with an .html extension.
```
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
```

To reference the latest dependencies from the CDN, see http://wijmo.com/downloads/#wijmo-cdn. Add them to your HTML page within the <head> tags. For example:

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
  
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
  
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css" rel="stylesheet" type="text/css" />
  
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>

Within the <body> tags, add markup like the following.
```
<div id="eventscalendar"></div>
```
The <div> element creates the widget, and its id option is set to 'eventscalendar', which we call in the jQuery script to initialize the widget. This markup adds a fully functioning events calendar to your page.
Within the <head> tags, below the references, add the following script to initialize the jQuery widget.
```
<script type="text/javascript">
    $(document).ready(function () {
       $("#eventscalendar").wijevcal({
	timeInterval: 15,
	timeIntervalHeight: 30,
	timeRulerFormat: "{0:h:mm tt}",
	timeRulerInterval: 30
	});
    });
</script>
```
This script sets several events calendar widget options.
- The time interval offers room for an event every 15 minutes instead of every 30 minutes.
- The time slots are each 30 pixels high instead of 15 pixels.
- The ruler formatting shows minutes, so that when we set the ruler interval to every 30 minutes, it shows more than just the hour.
- The ruler interval shows every half hour instead of every hour.
Save your HTML file and open it in a browser. The wijevcal widget appears like the following.

Concepts

Adaptive for Mobile Use

This widget is an adaptive widget in v3. If you are running v2.3.x, it is not adaptive. You can download v3 2013 1 here: Downloads Page.

An adaptive widget is different from a jQuery UI widget in that you can use it in both mobile and non-mobile web applications. To use it in non-mobile applications, just use the regular help. To use it in mobile applications:

Use jQuery Mobile instead of jQuery UI references
Do not initialize the widget in script (unless you need to for complex widgets like charts)
Use the data-role attribute to create the widget in markup

These steps are demonstrated in the Adaptive Widgets for jQuery Mobile topic.

API

Options

appointments

The event objects array. This option is read-only.

Type: Array

Default: []

Code Example:

$("#eventscalendar").wijevcal({ appointments: [{id: "appt1", start: new Date(2011, 4, 6, 17, 30), end: new Date(2011, 4, 6, 17, 35) }] });

calendars

Available calendar objects array. This option is read-only. Use the addCalendar/deleteCalendar methods in order to add/edit or delete a calendar.

Type: Array

Default: []

Code Example:

var calendars = $("#eventscalendar").wijevcal("option", "calendars");

colors

The colors option specifies the name of the colors that will be shown in the color name drop-down list.

Type: Array

Default: ["red", "darkorchid", "green", "blue", "cornflowerblue", "yellow", "bronze"]

Code Example:

$("#eventscalendar").wijevcal({ colors: ["cornflowerblue", "yellow"]);

culture

Determines the culture to be used, for example, "de-DE" is German.

Type: String

Default: " "

Code Example:

$("#eventscalendar").wijevcal({ culture: " de-DE");

dataStorage

Data storage methods. Use this option in order to implement custom data storage layer.

Type: Object

Default: {}

Code Example:

$("#eventscalendar").wijevcal(
		{ dataStorage: {
				addEvent: function(obj, successCallback, errorCallback) {
			},
			updateEvent: function(obj, successCallback, errorCallback) {
			},
			deleteEvent: function(obj, successCallback, errorCallback) {
			},
			loadEvents: function(visibleCalendars, 
			successCallback, errorCallback) {
			},
			addCalendar: function(obj, successCallback, errorCallback) {
			},
			updateCalendar: function(obj, successCallback, errorCallback) {
			},
			deleteCalendar: function(obj, successCallback, errorCallback) {
			},
			loadCalendars: function(successCallback, errorCallback) {
		}
});

dayHeaderFormat

Format of the text for the day cell header (month view). Format argument: {0} = Day date.

Type: String

Default: "{0:d }"

Code Example:

$("#eventscalendar").wijevcal({ dayHeaderFormat: "{0}" });

dayViewHeaderFormat

Format of the text for the day header in the day view. Format argument: {0} = Day date.

Type: String

Default:

"{day: "all-day events",
week: "{0:d dddd}",
list: "0:d dddd):
}"

Code Example:

$("#eventscalendar").wijevcal({ dayViewHeaderFormat: "{0: d}" });

disabled

Specifies whether the events calendar is disabled.

Type: Boolean

Default: false

Code Example:

$("#eventscalendar").wijevcal("option",  "disabled", true);

editCalendarTemplate

The calendar dialog box template.

Type: String

Default: ""

Code Example:

$("#eventscalendar").wijevcal({ editCalendarTemplate: "html content"});

enableLogs

Enables a built-in log console.

Type: Boolean

Default: false

Code Example:

$("#eventscalendar").wijevcal({ enableLogs: true });

eventTitleFormat

Format of the title text for the event.

Type: String

Default: "{2}"

Format arguments:

{0} = Start, {1} = End, {2} = Subject, {3} = Location, {4} = Icons.

Code Example:

$("#eventscalendar").wijevcal({ eventTitleFormat: "{0:h:mmtt}-{1:h:mmtt} {4} {2}"});

firstDayofWeek

The first day of the week (from 0 to 6). Sunday is 0, Monday is 1, and so on.

Type: Number

Default: 0

Code Example:

$("#eventscalendar").wijevcal({ firstDayOfWeek: 1 });

firstRowDayHeaderFormat

Format of the text for the first cell header in the first row of the month view.

Format argument:0} = Day date

Type: String

Default: "{0:MMM d}"

Code Example:

$("#eventscalendar").wijevcal({ firstRowDayHeaderFormat: "{0}" });

headerBarVisible

Indicates whether the header bar will be visible.

Type: Boolean

Default: true

Code Example:

$("#element").wijevcal({ headerBarVisible: false });

navigationBarVisible

Indicates whether the bottom navigation bar will be visible.

Type: Boolean

Default: true

Code Example:

$("#element").wijevcal({ navigationBarVisible: false });

rightPaneVisible

Indicates whether the right pane will be visible. By default the right pane is empty. You can use this pane in order to provide additional custom UI.

Type: Boolean

Default: false

Code Example:

$("#element").wijevcal({ rightPaneVisible: false });

selectedDate

The selected date.

Type: Date

Default: null

Code Example:

$("#eventscalendar").wijevcal({ selectedDate: new Date(2015, 11, 21) });

selectedDates

The selected dates.

Type: Date

Default: null

Code Example:

$("#eventscalendar").wijevcal({ selectedDates: [new Date(2012, 11, 21), new Date(2015, 11, 21)] });

statusBarVisible

Indicates whether the status bar will be visible.

Type: Boolean

Default: false

Code Example:

$("#element").c1reportviewer({ statusBarVisible: false });

timeInterval

The time interval in minutes for the Day view.

Type: Number

Default: 30

Code Example:

$("#eventscalendar").wijevcal({ timeInterval: 10 });

timeIntervalHeight

The Day view time interval row height in pixels.

Type: Number

Default: 15

Code Example:

$("#eventscalendar").wijevcal({ timeIntervalHeight: 30 });

timeRulerFormat

The time ruler format for the Day view. Format argument: {0} = Current ruler time.

Type: String

Default: "{0:h tt}"

Code Example:

 $("#eventscalendar").wijevcal({ timeRulerFormat: "{0:t}" });

timeRulerInterval

The time ruler interval in minutes for the Day view.

Type: Number

Default: 60

Code Example:

$("#eventscalendar").wijevcal({ timeRulerInterval: 60 });

titleFormat

The title text format that will be shown under the header bar. {0} = start date. {1} = end date.

Type: Object

Default:

{ 
day: false, 
week: " {0:MMMM yyyy}", 
month: " {0:MMMM yyyy}", 
list: false }

Code Example:

// Specify common title format:
		("#eventscalendar").wijevcal(
			{ 
				titleFormat: "First date: {0:d} Last date: {1:d}" 
			} 
		);
// Specify separate format for the each view:
		$("#eventscalendar").wijevcal(
			{ 
					titleFormat:  { 
			/* function customFormatFunc will be called 
			in order to format string: */
						day: customFormatFunc, 
						week: "Week {0:d} : {1:d}",
						month: "{0:yyyy, MMMM}",
						list: "Events until {1:d}" 
					}
			}
			);

viewType

The active view type. Possible values are: day, week, month, agenda.

Type: String

Default: Day

Code Example:

$("#eventscalendar").wijevcal({ viewType: "month" });

visibleCalendars

Array of the calendar names which need to be shown.

Type: Array

Default: ["Default", "Home", "Work"]

Code Example:

$("#eventscalendar").wijevcal("option", "visibleCalendars", ["My Calendar"]);

webServiceUrl

Determines the URL of the web service which will be used to store information about events.

Type: String

Default: "

Code Example:

		$("#report").wijevcal({ 
			webServiceUrl: "http://mysite/c1evcalservice.ashx" 
		});

Methods

addCalendar

Adds a new calendar.

Parameters:

o: Calendar object.

Calendar object fields:

id - String, unique calendar id, this field generated automatically;
name - String, calendar name;
location - String, location field;
description - String, calendar description;
color - String, calendar color;
tag - String, this field can be used to store custom information.
successCallback: Function that will be called when the calendar is added.
errorCallback: Function that will be called when the calendar cannot be added, for example, due to data source or memory problems.

Code Example:

	$("#wijevcal").wijevcal("addCalendar", { 
		name: "My calendar", 
		location: "Home", 
		description: "Some description",
		color: "lime" });

addEvent

Adds a new event.

Parameters:

o: Event object.

Event object fields:

id - String, unique event id, this field is generated automatically;
calendar - String, calendar id to which the event belongs;
subject - String, event title;
location - String, event location;
start - Date, start date/time;
end - Date, end date/time;
description - String, event description;
color - String, event color;
allday - Boolean, indicates all day event
tag - String, this field can be used to store custom information.
successCallback: Function that will be called when the event is added.
errorCallback: Function that will be called when the event cannot be added, for example, due to data source or memory problems.

Code Example:

	$("#wijevcal").wijevcal("addEvent", { 
		start: new Date(2011, 4, 2, 0, 32), 
		end: new Date(2011, 4, 2, 0, 50), 
		subject: "Subject" });

beginUpdate

Use beginUpdate and endUpdate when making a large number of changes to widget options.

Code Example:

	$("#wijevcal").wijevcal("beginUpdate");
	$("#wijevcal").wijevcal("option", "timeInterval", 10);
	$("#wijevcal").wijevcal("option", "timeRulerInterval", 20);
	$("#wijevcal").wijevcal("endUpdate");

deleteCalendar

Deletes the existing calendar from the current data source.

Parameters:

o: Calendar name or calendar object.
successCallback: Function that will be called when the calendar is deleted.
errorCallback: Function that will be called when the calendar cannot be deleted, for example, due to data source or memory problems.

Code Example:

	$("#wijevcal").wijevcal("deleteCalendar", "My calendar");

deleteEvent

Deletes the event.

Parameters:

o: Event object or event id.
successCallback: Function that will be called when the appointment is deleted.
errorCallback: Function that will be called when the appointment cannot be deleted, for example, due to data source or memory problems.

Code Example:

$("#wijevcal").wijevcal("deleteEvent", eventId);

endUpdate

Use beginUpdate and endUpdate when making a large number of changes to widget options.

Code Example:

	$("#wijevcal").wijevcal("beginUpdate");
	$("#wijevcal").wijevcal("option", "timeInterval", 10);
	$("#wijevcal").wijevcal("option", "timeRulerInterval", 20);
	$("#wijevcal").wijevcal("endUpdate");

goLeft

Navigates to the previous date.

Code Example:

$("#wijevcal").wijevcal("goLeft");

goRight

Navigates to the next date.

Code Example:

$("#wijevcal").wijevcal("goRight");

goToDate

Navigates to the date given by the parameter dt.

Parameters:

dt: Javascript date.

Code Example:

	$("#wijevcal").wijevcal("goToDate", new Date());

goToday

Navigates to today's date.

Code Example:

 
$("#wijevcal").wijevcal("goToday");

goToEvent

Navigates to the event given by the parameter id.

Parameters:

id: Event object or event id.

Code Example:

	$("#wijevcal").wijevcal("goToEvent", "apptid_dynid1ts1320322142549");

isAllDayEvent

Tests to see if the event duration is more than or equal to one day.

Parameters:

id: Event object or event id.

Code Example:

	var isAllDay = $("#wijevcal").wijevcal("isAllDayEvent", "apptid_dynid1ts1320322142549");

log

Sends a log message to a built-in log console.

Note: In order to use this method, you must set the enableLogs option to true.

Parameters:

msg: Log message.
className: Optional. CSS class name that will be applied to the destination message. Few predefined classes are available: "error", "warning", "information", "status".

Code Example:

$("#wijevcal").wijevcal("log", msg, className);

showEditCalendarDialog

Call this method in order to display a built-in "edit calendar" dialog box.

Parameters:

calendar: Calendar object or calendar name.

Calendar object fields:

id - String, unique calendar id, this field generated automatically;
name - String, calendar name;
location - String, location field;
description - String, calendar description;
color - String, calendar color;
tag - String, this field can be used to store custom information.

Code Example:

// Display a dialog box for a new calendar:
	$("#wijevcal").wijevcal("showEditCalendarDialog", null);

showEditEventDialog

Call this method in order to display a built-in "edit event" dialog box.

Parameters:

ev: Event object.

Event object fields:

id - String, unique event id, this field generated automatically;
calendar - String, calendar id to which the event belongs;
subject - String, event title;
location - String, event location;
start - Date, start date/time;
end - Date, end date/time;
description - String, event description;
color - String, event color;
allday - Boolean, indicates all day event
tag - String, this field can be used to store custom information.
offsetElement: Optional. DOM element which will be used to calculate dialog box position.

Code Example:

/// Display dialog box for a new event:
	$("#wijevcal").wijevcal("showEditEventDialog", null);

status

Changes status label text.

Parameters:

txt: The new status text.

Code Example:

$("#wijevcal").wijevcal("status", txt");

updateCalendar

Updates the existing calendar.

Parameters:

o: Calendar object.

Calendar object fields:

id - String, unique calendar id, this field generated automatically;
name - String, calendar name;
location - String, location field;
description - String, calendar description;
color - String, calendar color;
tag - String, this field can be used to store custom information.
successCallback: Function that will be called when the calendar is updated.
errorCallback: Function that will be called when the calendar cannot be updated, for example, due to data source or memory problems.

Code Example:

	$("#wijevcal").wijevcal("updateCalendar", { 
		name: "My calendar", 
		location: "Home", 
		description: "Some description",
		color: "lime" });

updateEvent

Updates the existing event.

Parameters:

o: Event object.

Event object fields:

id - String, unique event id, this field is generated automatically;
calendar - String, calendar id to which the event belongs;
subject - String, event title;
location - String, event location;
start - Date, start date/time;
end - Date, end date/time;
description - String, event description;
color - String, event color;
allday - Boolean, indicates all day event
tag - String, this field can be used to store custom information.
successCallback: Function that will be called when the event is updated.
errorCallback: Function that will be called when the event cannot be updated, for example, due to data source or memory problems.

Code Example:

	$("#wijevcal").wijevcal("updateEvent", { 
		start: new Date(2011, 4, 2, 0, 32), 
		end: new Date(2011, 4, 2, 0, 50), 
		subject: "Subject" });

Events

beforeAddCalendar

Occurs before the add calendar action. Return false or call the event.preventDefault() in order to cancel event and prevent the add action.

Type: Function

Event type: wijevcalbeforeaddcalendar

Parameters:

e: This is the jQuery.Event object.

args.data: This is the event object that should be added to a data source.

Code Example:

// Supply a callback function to handle the beforeAddEvent event as an option.
 $("#eventscalendar").wijevcal(
	   { 
		beforeAddCalendar: function (e, args) 
		{
			alert("Calendar with name " + 
			args.data.name + " will be added.");
		}
});
// Bind to the event by type: wijevcalbeforeaddcalendar.
 $("#eventscalendar").bind( "wijevcalbeforeaddcalendar", 
	function(e, args) {
	...		
});

beforeAddEvent

Occurs before the add event action.

Return false or call event.preventDefault() in order to cancel the event and prevent the add action.

Type: Function

Event type: wijevcalbeforeaddevent

Parameters:

e: This is the jQuery.Event object.

args.data: This is the new event data that should be added to a data source.

Code Example:

// Supply a callback function to handle the beforeAddEvent event as an option.
$("#eventscalendar").wijevcal(
 { 
	beforeAddEvent: function (e, args) 
 	{
		alert("Appointment with subject " + 
			args.data.subject + " will be added.");
		}
	});
// Bind to the event by type: wijevcalbeforeaddevent.
$("#eventscalendar").bind("wijevcalbeforeaddevent", 
	function(e, args) {
		...		
	 });

beforeDeleteCalendar

Occurs before the delete calendar action. Return false or call event.preventDefault() in order to cancel the event and prevent the delete action.

Type: Function

Event type: wijevcalbeforedeletecalendar

Parameters:

e: This is the jQuery.Event object.

args.data: This is the calendar data that should be deleted from a data source.

Code Example:

// Supply a callback function to handle the beforeDeleteCalendar event
as an option.
$("#eventscalendar").wijevcal(
{ 
	beforeDeleteCalendar: function (e, args) 
	{
		alert("Calendar with name " + 
			args.data.name + " will be deleted.");
	}
});
/// Bind to the event by type: wijevcalbeforedeletecalendar.
$("#eventscalendar").bind( "wijevcalbeforedeletecalendar", 
	function(e, args) {
		...		
});

beforeDeleteEvent

Occurs before the delete action. Return false or call event.preventDefault() in order to cancel the event and prevent the delete action.

Type: Function

Event type: wijevcalbeforesaveevent

Parameters:

e: This is the jQuery.Event object.

args.data: This is the event object that should be deleted.

Code Example:

// Supply a callback function to handle the beforeSaveEvent event as an option.
		 $("#eventscalendar").wijevcal(
			   { 
					beforeDeleteEvent: function (e, args) 
					{
						alert("Appointment with subject " + 
							args.data.subject + " will be deleted.");
					}
			});
		// Bind to the event by type: wijevcalbeforedeleteevent.
		 $("#eventscalendar").bind( "wijevcalbeforedeleteevent", 
			function(e, args) {
				...		
		 });

beforeEditEventDialogShow

Occurs before the built-in edit event dialog box appears. Return false or call event.preventDefault() in order to cancel the event and prevent the built-in dialog box from appearing.

Type: Function

Event type: wijevcalbeforeediteventdialogshow

Parameters:

e: This is the jQuery.Event object.

args.data: This is the event object to edit.

args.targetCell: This is the target offset DOM element that you can use for popup callout.

Code Example:

// Supply a callback function to handle the beforeEditEventDialogShow event
// as an option.
$("#eventscalendar").wijevcal(
          { 
               beforeEditEventDialogShow: function (e, args) 
               {
                    alert("Show dialog box for event with subject " + args.data.subject + ".");
                    return false;
                    // show your own dialog box
               }
           });
// Bind to the event by type: wijevcalbeforeediteventdialogshow.
$("#eventscalendar").bind( "wijevcalbeforeediteventdialogshow", function(e, args) {
             ...
           });

beforeUpdateCalendar

Occurs before the update calendar action. Return false or call the event.preventDefault() in order to cancel the event and prevent the update action.

Type: Function

Event type: wijevcalbeforeupdatecalendar

Parameters:

e: This is the jQuery.Event object.

args.data: This is the new calendar data that should be updated.

args.prevData: This is the previous calendar data.

Code Example:

// Supply a callback function to handle the beforeUpdateEvent event as an option.
 $("#eventscalendar").wijevcal(
   { 
	beforeUpdateCalendar: function (e, args) 
	{
		alert("Calendar with name " + 
		args.data.name + " will be updated.");
	}
});
// Bind to the event by type: wijevcalbeforeupdatecalendar.
 $("#eventscalendar").bind( "wijevcalbeforeupdatecalendar", 
	function(e, args) {
	...		
});

beforeUpdateEvent

Occurs before the update event action. Return false or call the event.preventDefault() in order to cancel the event and prevent the update action.

Type: Function

Event type: wijevcalbeforeupdateevent

Parameters:

e: This is the jQuery.Event object.

args.data: This is the new event data that should be updated.

args.prevData: This is the previous event data.

Code Example:

// Supply a callback function to handle the beforeUpdateEvent event as an option.
$("#eventscalendar").wijevcal(
   { 
	beforeUpdateEvent: function (e, args) 
	{
		alert("Appointment with subject " + 
			args.data.subject + " will be updated.");
	}
});
// Bind to the event by type: wijevcalbeforeupdateevent.
$("#eventscalendar").bind("wijevcalbeforeupdateevent", 
	function(e, args) {
	...		
});

calendarsChanged

Occurs when the calendars option has been changed.

Type: Function

Event type: wijevcalcalendarschanged

Parameters:

e: This is the jQuery.Event object.

args.calendars: This is the new calendars option value.

Code Example:

// Supply a callback function to handle the calendarsChanged event as an option.
		 $("#eventscalendar").wijevcal(
				{ calendarsChanged: function (e, args) {
				...
		    }
			});
	// Bind to the event by type: wijevcalcalendarschanged.
		 $("#eventscalendar").bind( "wijevcalcalendarschanged", 
			function(e, args) {
				...		
		 });

initialized(e)

Occurs when the events calendar is constructed and events data is loaded from an external or local data source.

Type: Function

Event type: wijevcalinitialized

Parameters:

e: This is the jQuery.Event object.

Code Example:

//Supply a callback function to handle the initialized event as an option.
		 $("#eventscalendar").wijevcal(
							{ initialized: function (e) {
				...
		    }
			});
// Bind to the event by type: wijevcalinitialized.
		 $("#eventscalendar").bind( "wijevcalinitialized", 
			function(e) {
				...		
		 });

selectedDatesChanged

Occurs when the selectedDates option has been changed.

Type: Function

Event type: wijevcalselecteddateschanged

Parameters:

e: This is the jQuery.Event object.

args.selectedDates: This is the new selectedDates value.

Code Example:

//Supply a callback function to handle the selectedDatesChanged event	as an option.
		 $("#eventscalendar").wijevcal(
							{ selectedDatesChanged: function (e, args) {
				...
		    }
			});
// Bind to the event by type: wijevcalselecteddateschanged.
		 $("#eventscalendar").bind( "wijevcalselecteddateschanged", 
			function(e, args) {
				...		
		 });

viewTypeChanged

Occurs when the viewType option has been changed.

Type: Function

Event type: wijevcalviewtypechanged

Parameters:

e: This is the jQuery.Event object.

viewType: This the new viewType value.

Code Example:

// Supply a callback function to handle the viewTypeChanged event as an option.
		 $("#eventscalendar").wijevcal(
							{ viewTypeChanged: function (e) {
				...
		    }
			});
		// Bind to the event by type: wijevcalviewtypechanged.
		 $("#eventscalendar").bind( "wijevcalviewtypechanged", function(e) {
				...		
		 });

Event Object Fields

id

Unique event id; this field is generated automatically.

Type: String

Remarks: Possible values are:

calendar - String, calendar id to which the event belongs;
subject - String, event title;
location - String, event location;
start - Date, start date/time;
end - Date, end date/time;
description - String, event description;
color - String, event color;
allday - Boolean, indicates all day event
tag - String, this field can be used to store custom information.

parentRecurrenceId

This is the id of the event object that defines the recurrence criteria for this event object.

Type: String

Remarks: If an event is recurring (see isRecurring), then it represents an occurrence in the series that is started and defined by a specific pattern event.

Use the getPatern method in order to obtain the pattern of the current event. A pattern event can be recognized by its recurrenceState field set to the "master" value.

The recurrence information defined by the pattern event can be accessed via the recurrencePattern field of the event. If this event is a not member of a recurrence or is itself a root event, this field will be null.

recurrencePattern

Represents the recurrence attributes of an event. Only master events can have this field (recurrenceState is "master").

Type: Object

Object syntax:

dayOfWeekMask

Contains a set of values representing the mask for week days on which the recurring event occurs.

Type: String

Default: "none"

Remarks: Monthly and yearly patterns are only valid for a single day.

When the "recurrenceType" field is set to "daily", the "DayOfWeekMask" field can only be set to "everyDay"; setting the field to any other value will result in an exception.

When the "recurrenceType" field is set to "workdays", the "dayOfWeekMask" field can only be set to "workDays"; setting the field to any other value will result in an exception.

When the "recurrenceType" field is set to "weekly", the "dayOfWeekMask" field cannot be set to "none"; doing so will result in an exception being thrown.

When the recurrenceType" field is set to "monthly" or "yearly", the "dayOfWeekMask" field is not applicable.

Possible values are:

none - No specific value; the actual value is obtained from the root event object.
sunday - Specifies Sunday.
monday - Specifies Monday.
tuesday - Specifies Tuesday.
wednesday - Specifies Wednesday.
thursday - Specifies Thursday.
friday - Specifies Friday.
saturday - Specifies Saturday.
weekendDays - Specifies Saturday and Sunday (or whatever days according to the settings of the C1EventsCalendar).
workDays - Specifies work days (all days except weekend).
everyDay - Specifies every day of the week.

dayOfMonth

The number of the day in its respective month on which each occurrence will occur. Applicable only when the recurrenceType field is set to "monthly" or "yearly".

Type: Number

Default: 1

endTime

Indicates the end time for the given occurrence of the recurrence pattern.

Type: Date

exceptions

Holds the list of event objects that defines the exceptions to that series of events.

Event objects are added to the exceptions whenever a field in the corresponding event object is altered.

Type: Array

instance

Determines the week in a month in which the event will occur.

Type: String

Default: "first"

Remarks: This field is only valid for recurrences of the "monthlyNth" and "yearlyNth" types and allows the definition of a recurrence pattern that is only valid for the Nth occurrence, such as "the 2nd Sunday in March" pattern.

Possible values are:

first - the recurring event will occur on the specified day or days of the first week in the month.
second - The recurring event will occur on the specified day or days of the second week in the month.
third - The recurring event will occur on the specified day or days of the third week in the month.
fourth - The recurring event will occur on the specified day or days of the fourth week in the month.
last - The recurring event will occur on the specified day or days of the last week in the month.

interval

Specifies the interval between occurrences of the recurrence.

Type: Number

Default: 1

Remarks: The interval field works in conjunction with the "recurrenceType" field to determine the cycle of the recurrence. The maximum allowable value is 99 for weekly patterns and 999 for daily patterns. For example, if the recurrenceType is set to daily and the "interval" is set to 3, then the recurrence will occur every third day.

monthOfYear

Indicates which month of the year is valid for the specified recurrence pattern.

Type: Number; can be a number from 1 to 12.

Default: 1

Remarks: This field is only valid for recurrence patterns whose recurrenceType" field is set to "yearlyNth" or "yearly".

noEndDate

Indicates if the recurrence pattern is endless.

Type: Boolean

Default: True

Remarks: This field must be coordinated with other fields when setting up a recurrence pattern. If the patternEndDate field or the occurrences field is set, then the pattern is considered to be finite and the "noEndDate" field is false. If neither patternEndDate nor occurrences is set, then the pattern is considered infinite and "noEndDate" is true.

occurrences

The number of occurrences for the recurrence pattern.

Type: Number

Default: 0

Remarks: This field allows the definition of a recurrence pattern that is only valid for the specified number of subsequent occurrences. For example, you can set this property to 10 for a formal training course that will be held on the next ten Thursday evenings.

This field must be coordinated with other fields when setting up a recurrence pattern. If the "patternEndDate" field or the "occurrences" field is set, then the pattern is considered to be finite and the "noEndDate" field is false. If neither "patternEndDate" nor "occurrences" is set, then the pattern is considered infinite and "noEndDate" is true.

parentRecurrenceId

The id of the event object which represents the master event for this recurrencePattern object.

Type: String

patternEndDate

Indicates the end date of the recurrence pattern.

Type: Date

Remarks: This field is optional but must be coordinated with other fields when setting up a recurrence pattern. If this field or the "occurrences" field is set, then the pattern is considered to be finite, and the "noEndDate" field is false. If neither "patternEndDate" nor "occurrences" is set, then the pattern is considered infinite and "noEndDate" is true. The "interval" field must be set before setting "patternEndDate".

patternStartDate

Indicates the start date of the recurrence pattern.

Type: Date

recurrenceType

Determines the type of recurrence.

Type: String

Remarks: Possible values are:

daily - The recurring event occurs on a daily basis.
workdays - The recurring event occurs every working day.
monthly - The recurring event occurs on a monthly basis.
monthlyNth - The recurring event occurs every N months.
weekly - The recurring event occurs on a weekly basis.
yearly - The recurring event occurs on an yearly basis.
yearlyNth - The recurring event occurs every N years.

removedOccurrences

Holds the list of event objects removed from that series of events.

Type: Array

startTime

Indicates the start time for the given occurrence of the recurrence pattern.

Type: Date

recurrenceState

Indicates the recurrence state of the event.

Type: String

Remarks: Possible values are "notRecurring"(or null), "master", "occurrence", "exception", and "removed".

Events Calendar

Contents

User Guide

Overview

Markup and Scripting

Quick Start

Concepts

Adaptive for Mobile Use

API

Options

appointments

calendars

colors

culture

dataStorage

dayHeaderFormat

dayViewHeaderFormat

disabled

editCalendarTemplate

enableLogs

eventTitleFormat

firstDayofWeek

firstRowDayHeaderFormat

headerBarVisible

navigationBarVisible

rightPaneVisible

selectedDate

selectedDates

statusBarVisible

timeInterval

timeIntervalHeight

timeRulerFormat

timeRulerInterval

titleFormat

viewType

visibleCalendars

webServiceUrl

Methods

addCalendar

addEvent

beginUpdate

deleteCalendar

deleteEvent

endUpdate

goLeft

goRight

goToDate

goToday

goToEvent

isAllDayEvent

log

showEditCalendarDialog

showEditEventDialog

status

updateCalendar

updateEvent

Events

beforeAddCalendar

beforeAddEvent

beforeDeleteCalendar

beforeDeleteEvent

beforeEditEventDialogShow

beforeUpdateCalendar

beforeUpdateEvent

calendarsChanged

initialized(e)

selectedDatesChanged

viewTypeChanged

Event Object Fields

id

parentRecurrenceId

recurrencePattern

dayOfWeekMask

dayOfMonth

endTime

exceptions

instance

interval

monthOfYear

noEndDate