How to use view object

Question

How to use view object

PHCPartsAlexis opened this issue a year ago · comments

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.

Vladimir · Answer 1 · Mon Jun 12 2023 20:00:24 GMT+0800 (China Standard Time)

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.

Alexis Threlfall · Answer 2 · Mon Jun 12 2023 20:05:03 GMT+0800 (China Standard Time)

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.

Vladimir · Answer 3 · Mon Jun 12 2023 20:32:46 GMT+0800 (China Standard Time)

The currently displayed date is set by the date option.

Alexis Threlfall · Answer 4 · Mon Jun 12 2023 20:45:12 GMT+0800 (China Standard Time)

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

Vladimir · Answer 5 · Mon Jun 12 2023 21:26:44 GMT+0800 (China Standard Time)

Here the currently displayed date is January 7, 2024.

Alexis Threlfall · Answer 6 · Mon Jun 12 2023 21:35:48 GMT+0800 (China Standard Time)

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 :)

Vladimir · Answer 7 · Mon Jun 12 2023 21:46:07 GMT+0800 (China Standard Time)

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

Alexis Threlfall · Answer 8 · Mon Jun 12 2023 21:47:33 GMT+0800 (China Standard Time)

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