Quasar: QCalendar component

[buccfer]

Calendar component such as:
http://angular-ui.github.io/ui-calendar/.

_Component description:_

Props:

1. events: of type array. Must be an array of calendar events. Each calendar event object should have: title, start date & end date. (What about recurrent events like "Every friday at 3 PM"?)

2. titleKey: of type string. Is the key name of the event that represents the title. Defaults to 'title'. In this way we can do something like event[this.titleKey].

3. startDateKey: of type string. Is the key name of the event that represents the start date. Defaults to 'startDate'. In this way we can do something like event[this.startDateKey].

4. endDateKey: of type string. Is the key name of the event that represents the end date. Defaults to 'endDate'. In this way we can do something like event[this.endDateKey].

5. view: of type string. Must be any of 'day', 'week' or 'month' and defaults to 'day'.

6. date: of type date. Is the date the calendar must display and it defaults to today. If a date is specified, then the expected behavior is:

• If view prop is set to 'day': Then it shows the events of that day.
• If view prop is set to 'week': Then it shows the events of the week which the specified date is in.
• If view prop is set to 'month': Then it shows the events of the month which the specified date is in.

1. loading: of type boolean. Determines if the events are being loaded async in order to show a loader in the calendar while getting the events. This is required.

Events:

1. viewChanged: Event emitted when the view changes (i.e. from 'day' to 'month').
   Event payload is: { startDate: '06/01/2017', endDate: '06/30/2017', newView: 'month', oldView: 'day' }
   Start date and end date are the dates that are being displayed in the calendar.

2. dateChanged: Event emitted when the date changes.

3. If view is day: then clicking on "back" or "next" buttons will subtract/add a day to the original date.
   Event payload is: { startDate: '06/27/2017', endDate: '06/27/2017', view: 'day' }

• If view is week: then clicking on "back" or "next" buttons will subtract/add 7 days to the original date.
  Event payload is: { startDate: '06/25/2017', endDate: '01/07/2017', view: 'week' }

• If view is month: then clicking on "back" or "next" buttons will subtract/add a month to the original date.
  Event payload is: { startDate: '12/01/2017', endDate: '31/01/2017', view: 'month' }

Payload startDate and endDate are the dates that are being displayed in the calendar. This allows the user to perform the appropriate http requests if needed.

[rstoenescu]

Is there any update on this?

[sirbeagle]

If there hasn't been any additional work on this we might be able to help.

We're in the late stages of building a Quasar-based calendar display module for a prototype app. It's not exactly as @buccfer described as above but does have some things in common. Our calendar has a month view, a multi-day view (which can be used for an individual day, a week or anything else) and an agenda view.

We were thinking of releasing this as a seperate repo so that we could keep adding features - maybe in a couple of weeks or so once we finish and cleanup code?

[litti]

@sirbeagle That sounds very interesting. Have you released the component already?

[sirbeagle]

@litti @buccfer @rstoenescu I just put it up on GitHub so you guys can take a look at it. Not quite ready for prime time yet but it is well on its way.

You can check out the current components at:

https://github.com/stormseed/quasar-calendar

and see a basic demo of functionality at

https://stormseed.github.io/quasar-calendar-demo

There is still lots of clean-up and functionality to do but I'm knocking stuff out piece by piece. I'm new at publishing packages on GitHub publicly so you'll have to bear with me. 😸

[slowaways]

Awesome @sirbeagle !!! I want you to be integrated with Quasar soon!

[rstoenescu]

Nice job! Advertised it a little on Twitter because it deserves it. Keep in touch!