Calendar - Soft UI

The Calendar component allows you to simply create beautiful Calendars with high customizability.

Default Calendar

Use this example to create simple and eye-catching calendar for you project.

<template>
  <calendar />
</template>

<script>
import Calendar from "@/examples/Calendar.vue";
export default { components: { Calendar, }, };
</script>

1<template>
2  <calendar />
3</template>
4
5<script>
6import Calendar from "@/examples/Calendar.vue";
7export default { components: { Calendar, }, };
8</script>

Props Information

Name	Type	Default	Description
id	String	widget-calendar	Used to set `id` for the current `Calendar` component.
title	String	Calendar	Used to set `title` of the `Calendar`.
day	String	Tuesday	Used to set `day` of the `Calendar`.
year	String	2022	Used to set `year` of the `Calendar`.
initialView	String	dayGridMonth	Used to set `initialView` format of the `Calendar`.
initialDate	String	2022-02-24	Used to set the start date of the `Calendar`.
events	Array		Used to add dates to the `Calendar`.
selectable	bool	true	Used to make the `Calendar` selectable.
editable	bool	true	Used to make the `Calendar` editable.