Quasar Calendar components

  • Hey everyone! I thought you might like to see something I’ve been working on: a full calendar for Quasar!

    This is still very much a work in progress but you can get a good sense for the functionality.

    Check out the demo at:

    Quasar calendar demo

    and the component source code at:

    Quasar calendar at GitHub

    You can pull in via NPM if you’d like but there will likely be a few more changes to the data format so you probably don’t want to use this in a project quite yet.

    This is based off of Quasar v0.14.x - I will be upgrading it to v0.15 in the very near future. It’s Material design only right now, I’ll start adding iOS once the functionality is down.

    Let me know what you think!

  • Looks mostly great, so far! Here are some questions and criticisms:

    1. Why do February always merge the third and fourth weeks?

    2. Are there any plans for integration with Quasar’s i18n effort?

    3. There’s room for improvement in Agenda layout, but I’m not very helpful about it right now. Maybe receiving month header color as a prop would be a nice idea ("primary" would be a better default than current blue)?

    Keep doing the great work so far!

  • VEEEERy Nice. Gtz @sirbeagle

  • @leopiccionia That’s the first time I’ve seen the February problem. Can I ask what OS / browser you’re using? I’ll check it out. And yes, the next milestone has a lot of internationalization tasks in there as development so far has been very US-centric. The agenda view is loosely based off of Google’s Android calendar view and the implementation here is still a bit sparse. There will be more options coming for that view in addition to another type of agenda view that is a little more friendly for larger screens.

  • @sirbeagle I’m using Ubuntu 17.10. The bug happens in Firefox (both 58.0.2 and 60.0a1 i.e. nightly), Chromium (64.0.3282.140) and Vivaldi (1.13.1008.40).

    I can try it on my Windows later, if you want.

  • Looks really neat!

  • This is the component I’m waiting for. Great job so far! I need a calender in my application and internationalization would be important for me, too. I will definitely give it a try after switching to v0.15 and waiting for your v0.15 compatibility.

    Are events, which last longer than one day, supported in the UI?

  • Demo not working. Would like to see it.

  • @polger It’s working for me…

  • @leopiccionia In chrome and opera there are issues. Here’s a console screenshot.


    I can see it running in firefox. It’s nice.

  • Hello, do you have a real world example of how to use this component? i am new on Quasar. Thanks.

  • I made just what was in the manual but got the error error ‘Calendar’ is defined but never used no-unused-vars

  • I’m getting the same error I followed the how-to from the readme but not working

    sure that I am missing something simple as I’m new to this

    if anyone has any tips on how to get this running that would be awesome


Log in to reply