See it in action
npm install kalendar-vue -S
import { Kalendar } from 'kalendar-vue';
...
components: {
Kalendar,
...
},
This array will be the source of the appointments which are rendered in the calendar.
<kalendar :configuration="calendar_settings" :events="events"/>
data: () => ({
events: [],
calendar_settings: {
style: 'material_design',
cell_height: 20,
scrollToNow: true,
current_day: new Date(),
read_only: false,
day_starts_at: 0,
day_ends_at: 24,
overlap: true,
hide_dates: ['2019-10-31'], // Spooky
hide_days: [6],
past_event_creation: true
},
new_appointment: {
title: null,
description: null
}
...
})
The plugin can turn incredibly useful using scoped slots. You can customize all the essential parts of it.
<kalendar>
<!-- CREATED CARD SLOT -->
<div slot="created-card"
slot-scope="{ event_information }"
class="details-card">
<h4 class="appointment-title">{{event_information.data.title}}</h4>
<small>
{{event_information.data.description}}
</small>
<span class="time">{{event_information.start_time | formatToHours}} - {{event_information.end_time |
formatToHours}}</span>
<button @click="removeEvent(event_information)"
class="remove">
X
</button>
</div>
<!-- CREATING CARD SLOT -->
<div slot="creating-card"
slot-scope="{ event_information }">
<h4 class="appointment-title"
style="text-align: left;">
New Appointment
</h4>
<span class="time">
{{event_information.start_time | formatToHours}}
-
{{event_information.end_time | formatToHours}}
</span>
</div>
<!-- POPUP CARD SLOT -->
<div slot="popup-form"
slot-scope="{ popup_information }"
style="display: flex; flex-direction: column;">
<h4 style="margin-bottom: 10px">
New Appointment
</h4>
<input v-model="new_appointment['title']"
type="text"
name="title"
placeholder="Title">
<textarea v-model="new_appointment['description']"
type="text"
name="description"
placeholder="Description"
rows="2"></textarea>
<div class="buttons">
<button class="cancel"
@click="closePopups()">
Cancel
</button>
<button @click="addEvent(popup_information)">
Save
</button>
</div>
</div>
</kalendar>
// Create Event
addEvent(popup_data, form_data) {
let payload = {
data: {
title: this.new_appointment.title,
description: this.new_appointment.description,
},
from: popup_info.start_time,
to: popup_info.end_time,
};
this.$kalendar.addNewEvent(
payload,
);
this.$kalendar.closePopups();
this.clearFormData();
},
// Remove Event
removeEvent(kalendarEvent) {
let day = kalendarEvent.start_time.slice(0, 10);
this.$kalendar.removeEvent({
day,
key: kalendarEvent.key,
id: kalendarEvent.kalendar_id,
})
},