Wijmo UI for the Web
wijevcal jQuery Widget
Add, edit, and manage appointments in a fully functional schedule with an offline data source.
Syntax
Javascript (Usage) 
$(function () {
    var options; // Type:  wijmo.evcal.wijevcal.options
     
    $(".selector").wijevcal(options);
});
Javascript (Specification) 
function wijevcal() : any;
Browser Compatibility
7
5
5
Options
 NameDescription
public Optionappointments

Default value: []

The event objects array. This option is read-only. This option is deprecated: please, use eventsData option, instead.

 
public Optioncalendars

Default value: []

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

 
public Optioncolors

Default value: null

The colors option specifies the name of the colors that will be shown in the color name drop-down list. "blue", "cornflowerblue", "yellow", "bronze"]

 
public Optionculture

Default value: ""

Determines the culture to be used, for example, "de-DE" is German. Date and time formatting depends on the culture option.

 
public OptiondataSource

Default value: null

A dataview object to bind to events data

 
public OptiondataStorage

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

 
public OptiondayHeaderFormat

Default value: '{0:d }'

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

 
public OptiondayViewHeaderFormat

Format of the text for the day header in the day view. Format argument: undefined = Day date.

 
public Optiondisabled

Default value: false

Specifies whether the events calendar is disabled.

 
public OptioneditCalendarTemplate

Default value: ""

The calendar dialog box template.

 
public OptionenableLogs

Default value: false

Enables a built-in log console.

 
public OptioneventsData

Default value: []

The event objects array.

 
public OptioneventTitleFormat

Default value: 'undefined'

Format of the title text for the event. Format arguments: undefined = Start, undefined = End, undefined = Subject, undefined = Location, undefined = Icons, undefined = Description.

 
public OptionfirstDayOfWeek

Default value: 0

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

 
public OptionfirstRowDayHeaderFormat

Default value: '{0:ddd d}'

Format of the text for the first cell header in the first row of the month view. Format argument: undefined = Day date.

 
public OptionheaderBarVisible

Default value: true

Indicates whether the header bar will be visible.

 
public Optionlocalization

Default value: null

Use the localization option in order to localize text which not depends on culture option.

 
public OptionnavigationBarVisible

Default value: true

Indicates whether the bottom navigation bar will be visible.

 
public OptionreadOnly

Default value: false

Set this option to true if you want to prevent users to edit events data.

 
public OptionrightPaneVisible

Default value: false

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

 
public OptionselectedDate

Default value: null

The selected date.

 
public OptionselectedDates

Default value: null

The selected dates.

 
public OptionstatusBarVisible

Default value: false

Indicates whether the status bar will be visible.

 
public OptiontimeInterval

Default value: 30

The time interval in minutes for the Day view.

 
public OptiontimeIntervalHeight

Default value: 15

The Day view time interval row height in pixels.

 
public OptiontimeRulerFormat

Default value: '{0:h tt}'

Time ruler format for the Day view.

 
public OptiontimeRulerInterval

Default value: 60

Time ruler interval for the Day view (in minutes).

 
public OptiontitleFormat

The title text format that will be shown under the header bar. undefined = start date. undefined = end date.

 
public OptionviewType

Default value: 'day'

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

 
public OptionvisibleCalendars

Array of the calendar names which need to be shown.

 
public OptionwebServiceUrl

Default value: ""

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

 
Top
Methods
 NameDescription
public MethodaddCalendarAdds a new calendar.  
public MethodaddEventAdds a new event.  
public MethodbeginUpdateUse beginUpdate and endUpdate when making a large number of changes to widget options.  
public MethoddeleteCalendarDeletes the existing calendar from the current data source.  
public MethoddeleteEventDeletes the event.  
public MethoddestroyRemoves the wijevcal functionality completely. This returns the element to its pre-init state.  
public MethodendUpdateUse beginUpdate and endUpdate when making a large number of changes to widget options.  
public MethodfindEventByIdFind event object by id  
public MethodgetOccurrencesRetrieves the array which contains the full list of Event objects in the specified time interval. Note, this method will create instances of the Event object for recurring events.  
public MethodgoLeftNavigates to the previous date.  
public MethodgoRightNavigates to the next date.  
public MethodgoToDateNavigates to the date given by parameter dt.  
public MethodgoTodayNavigates to today's date.  
public MethodgoToEventNavigates to the event given by the parameter id.  
public MethodgoToTimeScrolls view to time given by parameter time.  
public MethodhideLoadingLabelhide the loading label  
public MethodinvalidateInvalidates the entire surface of the control and causes the control to be redrawn.  
public MethodisAllDayEventTests to see if event duration is more or equals to one day.  
public MethodlocalizeStringGet the localized string by key  
public MethodlogSends a log message to built-in log console. Note: n order to use this method, you must set the enableLogs option to true.  
public MethodrefreshInvalidates the entire surface of the control and causes the control to be redrawn.  
public MethodshowEditCalendarDialogCall this method in order to display built-in "edit calendar" dialog box.  
public MethodshowEditEventDialogCall this method in order to display built-in "edit event" dialog box.  
public MethodstatusChanges status label text.  
public MethodupdateCalendarUpdates the existing calendar.  
public MethodupdateEventUpdates the existing event.  
public MethodwidgetReturns a jQuery object containing the original element or other relevant generated element.  
Top
Events
 NameDescription
public EventbeforeAddCalendarOccurs before the add calendar action. Return false or call event.preventDefault() in order to cancel event and prevent the add action.  
public EventbeforeAddEventOccurs before the add event action. Return false or call event.preventDefault() in order to cancel event and prevent the add action.  
public EventbeforeDeleteCalendarOccurs before the delete calendar action. Return false or call event.preventDefault() in order to cancel event and prevent the delete action.  
public EventbeforeDeleteEventOccurs before the delete action. Return false or call event.preventDefault() in order to cancel event and prevent the delete action.  
public EventbeforeEditEventDialogShowOccurs before the built-in event dialog is shown. Return false or call event.preventDefault() in order to cancel event and prevent the built-in dialog to be shown.  
public EventbeforeUpdateCalendarOccurs before the update calendar action. Return false or call event.preventDefault() in order to cancel event and prevent the update action.  
public EventbeforeUpdateEventOccurs before the update event action. Return false or call event.preventDefault() in order to cancel event and prevent the update action.  
public EventcalendarsChangedOccurs when calendars option has been changed.  
public EventeventsDataChangedOccurs when the eventsData option is changed.  
public EventinitializedOccurs when events calendar is constructed and events data is loaded from an external or local data source.  
public EventselectedDatesChangedOccurs when selectedDates option has been changed. Event type: wijevcalselecteddateschanged  
public EventviewTypeChangedOccurs when viewType option has been changed.  
Top

See Also

Widgets

EventsCalendar

Reference

wijevcal jQuery Widget

 

 


© 2013 All Rights Reserved.

Send comments on this topic.