A full event display calendar for the Quasar framework that has multiple viewing formats.

Overview

Daykeep Calendar

An event display calendar for the Quasar framework.

screenshot

Formerly known as Quasar Calendar, Daykeep Calendar for Quasar is a Quasar-flavored Vue.js calendar component.

Demo

You can see a demo of the calendar components with event data at:

Daykeep Calendar for Quasar demo

Setup

Version 1.0.x of Daykeep Calendar is intended to be used with Quasar Framework v1. For legacy versions of Quasar, you should use v0.3.x of Quasar Calendar.

yarn add @daykeep/calendar-quasar

Add Daykeep Calendar to your .vue page similar to a Quasar component

import { DaykeepCalendar } from '@daykeep/calendar-quasar'

or import individual components

import {
  DaykeepCalendarMonth,
  DaykeepCalendarAgenda,
  DaykeepCalendarMultiDay
} from '@daykeep/calendar-quasar'

In your template, you can just put in a calendar viewer using the current date as the start date

<daykeep-calendar />

Or you can pass in parameters to customize

<daykeep-calendar-month
  :start-date="Date('2019-01-01')"
  :event-array="someEventObject"
  :sunday-first-day-of-week="true"
  calendar-locale="fr"
  calendar-timezone="Europe/Paris"
  :allow-editing="false"
  :render-html="true"
/>

Event data format

The event data format is meant to be a subset of the Google Calendar v3 API (this is still a work in progress). Events should be passed in as an array of objects. Each object can have elements like in this example:

[
  {
    id: 1,
    summary: 'Test event',
    description: 'Some extra info goes here',
    location: 'Office of the Divine Randomness, 1232 Main St., Denver, CO',
    start: {
      dateTime: '2018-02-16T14:00:00', // ISO 8601 formatted
      timeZone: 'America/New_York' // Timezone listed as a separate IANA code
    },
    end: {
      dateTime: '2018-02-16T16:30:00',
      timeZone: 'American/New_York'
    },
    color: 'positive',
    attendees: [
      {
        id: 5,
        email: '[email protected]',
        displayName: 'John Q. Public',
        organizer: false,
        self: false,
        resource: false
      }
    ]
  },
  {
    id: 2,
    summary: 'Test all-day event',
    description: 'Some extra info goes here',
    start: {
      date: '2018-02-16' // A date variable indicates an all-day event
    },
    end: {
      date: '2018-02-19'
    }
  },
    {
      id: 3,
      summary: 'Some other test event',
      description: 'Some extra info goes here',
      start: {
        dateTime: '2018-02-17T10:00:00+0500', // timezone embedded in dateTime
      },
      end: {
        dateTime: '2018-02-17T12:30:00+0500',
      },
    },
]

Each object needs to have a unique ID. The date time should be in ISO 8601 format. A value in the optional timeZone field will override the timezone.

Calendar event referencing

Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string MYCALENDAR, the Vue.js event click-event-MYCALENDAR would fire on the global event bus when a calendar event is clicked on.

Custom event detail handling

By default we use our own event detail popup when an event is clicked. You can override this and use your own by doing a few things:

  • Pass in an event reference string
  • Prevent the default event detail from showing up
  • Listen for a click event to trigger your own detail content

So to implement, be sure to have prevent-event-detail and event-ref set when you embed a calendar component:

<daykeep-calendar
  event-ref="MYCALENDAR"
  :prevent-event-detail="true"
  :event-array="someEventObject"
/>

And then somewhere be sure to be listening for a click event on that calendar:

this.$root.$on(
  'click-event-MYCALENDAR',
  function (eventDetailObject) {
    // do something here
  }
)

Event editing

Starting with v0.3 we are setting up the framework to allow for editing individual events. By default this functionality is turned off, but you can pass a value of true into the allow-editing parameter on one of the main calendar components. The functionality if very limited to start but we expect to be adding more features in the near future.

When an event is edited, a global event bus message in the format of update-event-MYCALENDAR is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an update is detected the passed in eventArray array is updated and the array is parsed again.

Only a subset of fields are currently editable:

  • Start / end time and date
  • Is an all-day event
  • Summary / title
  • Description

Calendar Month Day Click Events

The DaykeepCalendarMonth component triggers a "click-day-{eventRef}" event when a calendar cell is clicked. The event data is an object describing the day, with a day, month, and year property each set to the appropriate value for the selected day.

So for a <daykeep-calendar-month> component with a "MYCALENDAR" event-ref:

this.$root.$on(
  'click-day-MYCALENDAR',
  function (day) {
    // do something here
  }
)

Individual Vue components

The usable components of DaykeepCalendar, DaykeepCalendarMonth, DaykeepCalendarMultiDay and DaykeepCalendarAgenda share the following properties:

Vue Property Type Description
start-date JavaScript Date or Luxon DateTime A JavaScript Date or Luxon DateTime object that passes in a starting display date for the calendar to display.
sunday-first-day-of-week Boolean If true this will force month and week calendars to start on a Sunday instead of the standard Monday.
calendar-locale String A string setting the locale. We use the Luxon package for this and they describe how to set this here. This will default to the user's system setting.
calendar-timezone String Manually set the timezone for the calendar. Many strings can be passed in including UTC or any valid IANA zone. This is better explained here.
event-ref String Give the calendar component a custom name so that events triggered on the global event bus can be watched.
prevent-event-detail Boolean Prevent the default event detail popup from appearing when an event is clicked in a calendar.
allow-editing Boolean Allows for individual events to be edited. See the editing section.
render-html Boolean Event descriptions render HTML tags and provide a WYSIWYG editor when editing. No HTML validation is performed so be sure to pass the data passed in does not present a security threat.
day-display-start-hour Number Will scroll to a defined start hour when a day / multi-day component is rendered. Pass in the hour of the day from 0-23, the default being 7. Current has no effect on the CalendarAgenda component.

In addition, each individual components have the following properties:

DaykeepCalendar

Vue Property Type Description
tab-labels Object Passing in an object with strings that will override the labels for the different calendar components. Set variables for month, week, threeDay, day and agenda. Eventually we will replace this with language files and will use the calendar-locale setting.

DaykeepCalendarMultiDay

Vue Property Type Description
num-days Number The number of days the multi-day calendar. A value of 1 will change the header to be more appropriate for a single day.
nav-days Number This is how many days the previous / next navigation buttons will jump.
force-start-of-week Boolean Default is false. This is appropriate if you have a week display (7 days) that you want to always start on the first day of the week.
day-cell-height Number Default is 5. How high in units (units defined below) an hour should be.
day-cell-height-unit String Default is rem. When combined with the day-cell-height above, this will determine the CSS-based height of an hour in a day.
show-half-hours Boolean Default is false. Show ticks and labels for half hour segments.

DaykeepCalendarAgenda

Vue Property Type Description
num-days Number The number of days to initially display and also the number of additional days to load up when the user scrolls to the bottom of the agenda.
scroll-height String Defaults to 200px, this is meant to define the size of the "block" style.
Comments
  • [Feature Request] Limit start and end time for calendar-multi-day

    [Feature Request] Limit start and end time for calendar-multi-day

    It would be awesome if I could limit the start and end times of this view to only business hours where events would most likely be scheduled. Maybe this is already possible somehow?

    enhancement 
    opened by danielcomcom 8
  • [Vue warn]: Unknown custom element: <calendar> - did you register the component correctly?

    [Vue warn]: Unknown custom element: - did you register the component correctly?

    That's the message I get if I follow the instructions on the ReadMe:

    < template>
      < q-page>
        < calendar />
      < /q-page>
    < /template>
    
    
    quasar-calendar is in node_modules

    There was this compiler warning (not crash) warning in ./src/pages/Calendar.vue 17:2-16 "export 'default' (imported as 'vue_script') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./Calendar.vue'

    This is not a Q- to put in quasar.config.js, and there are no instructions to create a Vue component. I must have missed something.

    opened by KnowledgeGarden 7
  • Support for IE 11

    Support for IE 11

    Great component. I was wondering if support for IE11 is planned? I'm getting "SCRIPT1010: Expected identifier" in node_modules/quasar-calendar/src/components/calendar/mixins/CalendarMixin.js Thanks

    opened by kdmon 3
  • Unknown custom element: <calendar-month>

    Unknown custom element:

    Hi, I have a problem when i try to use quasar-calendar. After install via npm and trying to use it in my code i got error:

    Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    opened by BartekPacocha 3
  • Error in nextTick:

    Error in nextTick: "RangeError: Maximum call stack size exceeded" using agenda-style="block"

    Hi @Chris Benjamin, using the following code returns the error shown above

      <template>
      <q-page padding>
        <calendar-agenda
          :eventArray="eventos"
          agenda-style="block"
          :sunday-first-day-of-week="true"
          :allow-editing="false"
          :num-days="1"
          calendar-locale="es"
          calendar-timezone="America/Argentina/Buenos_Aires"
        >
      </calendar-agenda>
      </q-page>
    </template>
    
    <script>
    import { Calendar } from 'quasar-calendar'
    export default {
      data () {
        return {
          eventos: [
            {
              id: 1,
              summary: 'Test event',
              description: 'Some extra info goes here',
              location: 'Inaguración del mural Puto el que lee',
              start: {
                dateTime: '2018-06-12T14:00+02:00', 
                timeZone: 'America/Argentina/Buenos_Aires' 
              },
              end: {
                dateTime: '2018-06-12T16:30+02:00',
                timeZone: 'America/Argentina/Buenos_Aires'
              },
              color: 'primary'
            },
          ]
        }
      },
      components: {
        'calendar-agenda': Calendar
      }
    }
    </script>
    

    Console shows

    found in 
    ---> <QInfiniteScroll>
           <CalendarAgenda> at node_modules/quasar-calendar/src/components/calendar/CalendarAgenda.vue
    

    When I change the property agenda-style to "dot" works great. Thanks.

    opened by arieltoledo 3
  • TypeError: expected rgba or hsla, but got ident:$light

    TypeError: expected rgba or hsla, but got ident:$light

    Hi

    Thanks for the v1.0.0-beta.1 release 👍

    I have the following error : TypeError: expected rgba or hsla, but got ident:$light at https://github.com/stormseed/quasar-calendar/blob/v1.0.0-beta.1/component/calendar/CalendarEventDetail.vue#L652

    This component use $light quasar var but the import has been removed by this commit : e033a0345e6841ded37f43a372716eea2fbfcb6e

    opened by klevron 2
  • Displaying Multi-Day Events

    Displaying Multi-Day Events

    I am using <calendar-month> and have an events-array property set to the data we want to display.

    Events that start and end on the same day seem to display fine. However, display of events that span multiple days does not seem to work with the data I'm providing.

    One of the objects in events-array contains the data:

    {
      start:  { dateTime: "2018-09-24T14:00:00.000Z" },
      end: { dateTime: "2018-09-25T20:00:00.000Z" }
    }
    

    It only shows a entry on the calendar for the start day. It does not show that the event spans across two days.

    Is there something else I need to be doing? Is what I'm doing now wrong in some way?

    opened by wooliet 2
  • [Feature Request] Current time indicator

    [Feature Request] Current time indicator

    I'm building a simple appointment scheduler, and a time indicator much like the one found in Google Calendar would be nice to have. It should be displayed when the calendar is in week or day view.

    image

    enhancement 
    opened by dnasir 2
  • Quasar beta build error against

    Quasar beta build error against "do upgrade" branch

    We've been building against the calendar's "do upgrade" branch, and the latest quasar beta build fails with:

    ERROR in ./node_modules/quasar-calendar/component/calendar/Calendar.vue?vue&type=style&index=0&lang=stylus& (./node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-2-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-stylus-variables.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/quasar-calendar/component/calendar/Calendar.vue?vue&type=style&index=0&lang=stylus&)
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
      ModuleBuildError: Module build failed (from ./node_modules/stylus-loader/index.js):
        Error: /Users/me/Projects/project/node_modules/stylus/lib/functions/index.styl:133:36
           129| 
           130| // lighten by the given amount
           131| 
           132| lighten(color, amount)
           133|   adjust(color, 'lightness', amount)
        -------------------------------------------^
           134| 
           135| // decrease opacity by amount
           136| 
        TypeError: expected rgba or hsla, but got ident:$grey-3
        
    

    More info:

    Possibly related

    https://github.com/quasarframework/quasar/issues/3966#issuecomment-487502525

    Quasar version succeeds

    quasar - v1.0.0-beta.18 @quasar/app - v1.0.0-beta.19

    Quasar version fails

    quasar - 1.0.0-beta.20 @quasar/app - 1.0.0-beta.22

    Calendar integration

    package.json

    "dependencies": {
        "quasar-calendar": "github:stormseed/quasar-calendar#do_upgrade_to_1.0"
    }
    

    quasar.conf.js

      return {
        boot: [
          'quasar-calendar'
        ],
    

    src/boot/quasar-calendar.js

    import {
      Calendar,
      CalendarMonth,
      CalendarMultiDay,
      CalendarAgenda
    } from 'quasar-calendar/component';
    
    export default async ({ Vue }) => {
      Vue.component('q-calendar', Calendar);
      Vue.component('q-calendar-month', CalendarMonth);
      Vue.component('q-calendar-multi-day', CalendarMultiDay);
      Vue.component('q-calendar-agenda', CalendarAgenda);
    };
    
    opened by wooliet 1
  • refactor CalendarAgenda so that it uses Luxon date functions

    refactor CalendarAgenda so that it uses Luxon date functions

    Right now the agenda component is using a mix of Quasar date functions and Luxon functions (via mixins). Let's standardize on Luxon to keep it consistent with everything else.

    opened by sirbeagle 1
  • Parse HTML in description

    Parse HTML in description

    Currently I can't seem to put HTML line breaks <br> or links <a> in the description field for the calendar data. Is it planned to support that?

    opened by ddsky 1
  • Readme.md is not enough to use calendar.

    Readme.md is not enough to use calendar.

    I need a more detailed documentation but I can not find any.

    I want to show an event detail by a condition but I don't know how I can do it. I hope there is a documentation.

    opened by enesbehlul 0
  • Changing multi day views ignores day-display-start-hour

    Changing multi day views ignores day-display-start-hour

    Changing views from a view (month or agenda) to a multiday view (week, 3 day and single day) works fine. By default the start hour is 7.

    But going from month to week to a 3 day view will just go to hour 0. Going back to week goes back to the correct start hour. Month to 3 day view has the correct start hour but then the other views revert back to 0 again.

    This can be seen in the demo linked on github. Changing days forwards or back kicks in the correct start hour for that view but if you move away if reverts to 0 when revisited.

    opened by emg36 0
Releases(v1.0.0-beta.3)
  • v1.0.0-beta.3(Jul 31, 2019)

    • Add in JSON description files for quasar-app-extension-daykeep
    • Change dependency structure to try and avoid having multiple copies of Vue initialized which might be causing #66.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-beta.2(Jun 3, 2019)

    We are renaming this project to Daykeep Calendar - the new Github URL is https://github.com/stormseed/daykeep-calendar-quasar. The code is now split into some core components and a set of platform-specific components. To install via NPM / Yarn, use the projects name @daykeep/calendar-quasar.

    Because a lot of stuff has moved around in this push I suspect we'll be fixing a few things in the next couple of days.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-beta.1(May 6, 2019)

    This has been sitting on a branch for a while and as it looks like Quasar is getting pretty close to a v1.0 release I guess now would be a good time to put this into beta.

    This version will require Quasar v1.0.x. Legacy versions of Quasar should use this calendar component at v0.3.x.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.4(Feb 20, 2019)

    Change overlap counting to a grid block system to better check to see how many events actually overlap. This will allow multiple column configurations within a single day column that will fully utilize available horizontal space.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.3(Feb 15, 2019)

    Trying out a completely different strategy on handling event overlaps by using a routine that actively tries to squeeze in events on any existing column starting from the left. The outcome is mostly the same but should be smarter in rending more compactly. Also some graphic tweaks to make it easier to see the difference between events close to each other.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(Feb 8, 2019)

    • HTML rendering and editing are now optionally available in an event's description field
    • all day events no longer revert to a time-scheduled event when edited and saved
    • monthly calendars now support day clicks
    • Overlapping events occurring on the same day are now properly sorted and accounted for
    • A new event is triggered any time the view changes either via switching a tab in the full calendar component or navigating between days. This should be useful when loading in data dynamically.
    • Remove any last remnants of Quasar's date functions in favor of Luxon.
    • Events that cross into the next day or multi-day events with associated times should now be rendered properly.
    • Updated event rendering to make times a bit easier to read and take advantage of vertical space if it's available

    Thanks to @wooliet, @lpmi-13, @kdmon, @Jasqui and every one who's helping squash some bugs!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.1(Sep 28, 2018)

    Update to using Quasar v0.17.x (v.0.17.16 as of this release). Fixes to multi-day event rendering (thank you @wooliet). Fix to incorrect parameter in the documentation (thank you again @wooliet). Added feature to default to a hour of the day in day / multi-day views.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jun 7, 2018)

    Allow for basic event editing that can be watched to trigger foreign API calls. This is the groundwork for adding more editing features down the road.

    Source code(tar.gz)
    Source code(zip)
  • v0.2.3(May 24, 2018)

    update to quasar 0.16 and ensure compatibility; cleanup and add watches for changes to the eventsArray and startDate to hopefully better catch page refreshes; add function to get a string version of an event ID which should allow for IDs that are not integers; remove the "blankCalendarEvent" variables in favor of just checking to see if an eventObject is empty; make sure empty array and object properties are defined by a function (thank you @dreglad)

    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Mar 23, 2018)

Owner
Stormseed
Stormseed
Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. 中文文档 ?? Live demo I

Kit 75 Nov 11, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

Antoni 982 Dec 29, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 114 Dec 13, 2022
Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Brahim 40 Jun 8, 2022
A full 12-Month view calendar made by vue.js.

A full 12-Month view calendar made by vue.js.

null 90 Mar 23, 2021
Full featured, responsive, lightweight calendar in the browser.

Full featured, responsive, lightweight calendar in the browser.

Altin Selimi 242 Dec 18, 2022
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

?? A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

飞翔的荷兰人 434 Jan 3, 2023
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 3 Oct 31, 2022
List Maker - CQRS and Event Sourcing Example

List Maker - CQRS and Event Sourcing Example This is the frontend app written in Vue.js for the CQRS and Event Sourcing Example project. Usage Instala

Renan Taranto 12 Mar 31, 2022
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Dec 18, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 633 Nov 11, 2022
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic <template> <calendar></calendar> </template> <script>

Franck Freiburger 47 Nov 24, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

Vincent 55 May 2, 2022
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.7k Dec 31, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022