search

vkurko / calendar

Full-sized drag & drop JavaScript event calendar with resource & timeline views
https://vkurko.github.io/calendar/
MIT License
969 stars 82 forks source link

How to use view object #144

Closed PHCPartsAlexis closed 1 year ago

PHCPartsAlexis commented 1 year ago

Hi All,

I've not got a lot of experience with JS so you'll have to forgive the rather n00b question, but how do I interact with the view object? I can't see any examples of how to do this, and all the things I've tried just result in the calendar not rendering!

I've tried this; <script type="text/javascript"> let ec = new EventCalendar(document.getElementById('ec'), { view: 'resourceTimeGridWeek', height: '700px', headerToolbar: { start: '', center: 'title', end: '' }, scrollTime: '07:00:00', currentStart='2023-6-12', firstDay: 1,

(and obviously then supplying event data)

I've tried to do similar with views, naming a new view and supplying type, currentStart etc. to no avail.

This is the best calendar solution I've come accross btw, and vastly easier than some of my own home-brew efforts! Thanks to the dev's for the high quality package.

Cheers,

Alexis.

vkurko commented 1 year ago

Sorry if I don't quite understand what exactly your question is. You can see a working example in the demo. The source code for the demo page is also available.

I've also prepared this very simple code example for you.

PHCPartsAlexis commented 1 year ago

Thanks for the prompt reply! I've got the calendar displaying, but what I am trying (and failing) is to convince the code to start at a given date, rather than displaying the current week.

I basically am building a room booking display system - so want to show "today" and the next 7 days for people to see availability.

So I looked for an option for this, but I could only find it under the view object and it's currentStart method. But I can't make it work.

vkurko commented 1 year ago

The currently displayed date is set by the date option.

PHCPartsAlexis commented 1 year ago

Can you provide me an example of how I would use that option with a javascript date object please?

vkurko commented 1 year ago

Here the currently displayed date is January 7, 2024.

PHCPartsAlexis commented 1 year ago

Ah, thank you very much, that helps my understanding. However when using a week view, setting the date to any day within that week still only displays that week, not a week starting from the specified date which is what I'm trying to do :)

vkurko commented 1 year ago

Setting the correct value for date in combination with the correct value for firstDay will most likely get you the desired result :smile:

PHCPartsAlexis commented 1 year ago

Aha, bingo. Nice one :) Thanks for your help!