How To

The following section explains how to customize various aspects of Calendar.

Set today and clear buttons

To configure today and clear buttons in Calendar UI, do the following:

  1. To the created event of the Calendar, add the required elements to make the clear and today buttons visible. In the following example, div with two Essential JS 2 button components are used.

  2. When the e-footer class is used, the div tag acts as the footer.

  3. Using these two buttons, today’s date is selected and the selected date can be cleared.

  4. Bind the required event handler to the button tags to update the value.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-calendar id='calendar' :created='onCreate' ref="CalendarInstance"></ejs-calendar>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(CalendarPlugin);
export default {
        methods: {
            onCreate: function(args) {
                let calendarObj = this.$refs.CalendarInstance;
                let clearBtn = document.createElement('button');
                let footerElement = document.getElementsByClassName('e-footer-container')[0];
                clearBtn.className = 'e-btn e-clear e-flat';
                clearBtn.textContent = 'Clear';
                footerElement.prepend(clearBtn);
                calendarObj.$el.appendChild(footerElement);
                document.querySelector('.e-footer-container .e-clear').addEventListener('click', function () {
                    calendarObj.value = null;
                    calendarObj.dataBind();
                });
            }
        }
    }
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrap {
    margin: 35px auto;
    width: 240px;
}
.e-clear {
    margin-right: 81px;
}
</style>

Show dates of other months

The following example demonstrates how to show dates of other months.

Using the styles below, you can bring the dates of other months to visibility from its hidden state.

<style>
.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
</style>
Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-calendar id='calendar'></ejs-calendar>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(CalendarPlugin);
export default {
    return {
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrap {
    margin: 0px auto;
    max-width: 250px;
}
.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
</style>

Select a sequence of dates in Calendar

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when isMultiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class="wrap" style="height:357px; display: inline-block;">
           <ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection" :change="onChange"></ejs-calendar>
        </div>
         <div id="btncontainer" class="e-btn-group e-vertical">
        <ejs-button id="week" class="e-btn"  v-on:click.native="onweekChange"> Week </ejs-button>
        <ejs-button id="workweek" class="e-btn" v-on:click.native="onworkweekChange"> Work Week </ejs-button>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import moment from "moment";

Vue.use(CalendarPlugin);
Vue.use(ButtonPlugin);
export default {
    data() {
        return {
            isMultiSelection: true
        }
    },
    methods: {
        onChange: function(args) {
            let startOfWeek = moment(args.value).startOf('week');
            let endOfWeek = moment(args.value).endOf('week');
            if (this.$refs.CalendarInstance.$el.classList.contains('workweek')) {
                this.getWeekArray(startOfWeek.day(1), endOfWeek.day(5));
            } else if (this.$refs.CalendarInstance.$el.classList.contains("week")) {
                this.getWeekArray(startOfWeek, endOfWeek);
            }
        },
        /*selected current week dates when click the button*/
        onweekChange: function() {
            if (this.$refs.CalendarInstance.$el.classList.contains('workweek')) {
                this.$refs.CalendarInstance.$el.classList.remove('workweek')
            }
            this.$refs.CalendarInstance.$el.classList.add('week');
        },
        onworkweekChange: function() {
            if (this.$refs.CalendarInstance.$el.classList.contains('week')) {
                this.$refs.CalendarInstance.$el.classList.remove('week')
            }
            this.$refs.CalendarInstance.$el.classList.add('workweek');
        },
        getWeekArray: function(startOfWeek, endOfWeek) {
            let days = [];
            let day = startOfWeek;
            while (day <= endOfWeek) {
                days.push(day.toDate());
                day = day.clone().add(1, 'd');
            }
            this.$refs.CalendarInstance.values = days;
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";

.wrap {
    margin: 0px auto;
    max-width: 250px;
}

#app{
    max-width: 550px;
}

#btncontainer{
    float:right;
    margin-left:30px;
    margin-top: 75px;
}

</style>

Skip a month in the Calendar

The following example demonstrates how to skip a month in the Calendar while clicking the previous and next icons. In the example below, the navigated event is used to skip a month with navigateTo method.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-calendar id='calendar' :navigated='onNavigate' ref='Calendar'></ejs-calendar>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(CalendarPlugin);
export default {
    methods: {
        onNavigate: function(args){
            let date;
            if (args.event.currentTarget.classList.contains('e-next')) {
            //Increments the month while clicking the next icon.
            date = new Date(args.date.setMonth(args.date.getMonth() + 1));
            }
            if (args.event.currentTarget.classList.contains('e-prev')) {
            //Decrements the month while clicking the previous icon.
            date = new Date(args.date.setMonth(args.date.getMonth() - 1));
            }
            if (args.view == 'month') {+
                this.$refs.Calendar.navigateTo('month', date);
            }

        }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrap {
    margin: 0px auto;
    max-width: 250px;
}

</style>

Render the Calendar with week numbers

You can enable weekNumbers in the Calendar by using the weekNumber property.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-calendar id='calendar' :weekNumber='weeknumber'></ejs-calendar>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(CalendarPlugin);
export default {
    data () {
        return {
           weeknumber : true
        }
    }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrap {
    margin: 0px auto;
    max-width: 250px;
}

</style>

Change the first day of the week

The Calendar provides an option to change the first day of the week by using the firstDayOfWeek property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday).

By default, the first day of the week is culture specific.

The following example shows the Calendar with Tuesday as the first day of the week.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-calendar id='calendar' :firstDayOfWeek='firstDay'></ejs-calendar>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(CalendarPlugin);
export default {
   data () {
        return {
           firstDay : 2
        }
    }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
 .wrap {
    margin: 0px auto;
    max-width: 250px;
}

</style>