NativeScript & Vue.JS

RadCalendar View Modes

RadCalendar supports the view modes exposed by the CalendarViewMode enum. The following view modes are supported:

To change the view mode of RadCalendar you should use its viewMode property and set it to one of the aforementioned values.

import { CalendarViewMode } from 'nativescript-ui-calendar';
import { getEvents } from '../data';

const description = 'View modes';

export default {
  name: 'ViewModes',
  description: description,
  template: `
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    <GridLayout orientation="vertical" rows="*, auto">
      <StackLayout row="1" orientation="horizontal">
        <Button class="viewButton" width="18%" text="Week" @tap="onWeekTap"></Button>
        <Button class="viewButton" width="18%" text="Month"  @tap="onMonthTap"></Button>
        <Button class="viewButton" width="25%" text="Month names"  @tap="onMonthNamesTap"></Button>
        <Button class="viewButton" width="18%" text="Year"  @tap="onYearTap"></Button>
        <Button class="viewButton" width="18%" text="Day"  @tap="onDayTap"></Button>
  data () {
    return {
      events: getEvents(10),
      viewMode: CalendarViewMode.Month,
      title: description
  methods: {
    onNavigationButtonTap() {
    onWeekTap() {
      this.viewMode = CalendarViewMode.Week;
    onMonthTap() {
      this.viewMode = CalendarViewMode.Month;
    onMonthNamesTap() {
      this.viewMode = CalendarViewMode.MonthNames;
    onYearTap() {
      this.viewMode = CalendarViewMode.Year;
    onDayTap() {
      this.viewMode = CalendarViewMode.Day;