Wijmo UI for the Web
Custom View
Wijmo User Guide > Widgets > EventsCalendar > Custom View

Wijmo allows you to customize your events calendar widget by adding different views to it. By default, Wijeventscalendar shows current date, month and list as shown in the Quick Start. You can easily customize display of the eventscalendar by adding custom views, such as two weeks view or two months view, to the eventscalendar.

The wijeventscalendar below shows one default viewType, Day and four custom views, two days, two weeks, two months and two years of timeline. The script uses views and viewType options to display various items on the events calendar. Views is an array that accepts items as object, and viewType is the currently active view of the events calendar.

Syntax to use items as objects in Views:

name - (String)the unique name of custom view to be displayed on the toolbar.
unit - (String)the time unit of custom view, possible values are "day", "week", "month", "year".
count- (number)the count of time span, depends on the unit.

The script below adds four custom views, 2 Days, 2 Weeks, 2 Months and 2 Years to the wijeventscalendar, and sets the active viewType to 2 weeks.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijevcal", "amplify"], function () {
        $(document).ready(function () {
           $("#eventscalendar").wijevcal({
           //adding custom views
views: ["week", { name: "2 Days", unit: "day", count: 2 }, { name: "2 Weeks", unit: "week", count: 2 }, { name: "2 Months", unit: "month", count: 2 },
{ name: "2 Years", unit: "year", count: 2 }],
viewType: "2 weeks"
     });
$("#eventscalendar").wijevcal("option", "viewType", "2 weeks");
    });
     });
</script>
<style type="text/css">
    #eventscalendar
     {
       width: 700px;
       height:550px;
     }
</style>