Render the calendar with week numbers in Vue Calendar component

28 Feb 20231 minute to read

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

<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>