Github

Kalendar

Your best friend when it comes to event managment in Vue, React or Angular.

See it in action

PREFERENCES
      All Day

    Getting started

    Install plugin from npm

    npm install kalendar-vue -S

    Import plugin in your component

    
    import { Kalendar } from 'kalendar-vue';
    ...
    components: {
      Kalendar,
      ...
    },
    

    Provide appointments array.

    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
      }
      ...
    })
    

    Using Slots

    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,
      })
    },