jackducasse / caleandar

A lightweight, library independent JavaScript calendar
MIT License
80 stars 41 forks source link

SET FUTURE EVENTS #3

Open Ayanleye opened 7 years ago

Ayanleye commented 7 years ago

Hi, Nice plugin, but please is there a way i can set the future events on the calendar?

I noticed when i pass them only events on the present month get attached to the calendar. when i navigate to the future event date they are not present on the calendar,thanks.

icaroscherma commented 7 years ago

How are you trying to set future events? Here is working fine... I just set:

var events = [
  {'Date': new Date(2017, 3, 7), 'Title': 'Doctor appointment at 3:25pm.'},
  {'Date': new Date(2017, 4, 18), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
  {'Date': new Date(2017, 3, 27), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
];

And checked, working flawlessy...

Screen:

image


Do you mean reactivity by adding events on the fly and they being attached to the calendar? For this I think you need to rebuild the calendar with the new events' array if you don't want to change the core of this lib. Are you using some DOM-like JS Lib (jQuery), a React-like JS Lib (Vue) or just plain JS ?

For quick changes using plain JS you can add this to your "array-push" function: (PS.: I'm using the default var names as in demo.html )

// erases the actual content of the calendar
element.innerHTML = '' ; 
// builds a new calendar with the new events
caleandar(element, events, settings); 

so, when you do something like events.push({'Date': new Date(2017, 3, 7), 'Title': 'Doctor appointment at 3:25pm.'}); you should put the code above, or implement a Proxy or another array-changing detection and the calendar should "update" (gets destroyed and rebuilded) automatically.

AFMiziara commented 6 years ago

How can I add new events after creating the calendar?

aboutwd commented 4 years ago

Everything is working fine for me (with some minor adjustments). Thanks for making this code.

I have one problem though. If I have several dates in the list that pass over from one month to the next month, only the current month's dates show until I click to the next month.

Example: My seminar is 5 days long June 29th - July 3rd. If I'm looking at JUNE, I only see 2 active events, (the 29th and 30th). When I move to July, I see only 3 (July 1, 2 and 3rd) How can I get all 5 dates to show at the same time?

Thanks

icaroscherma commented 4 years ago

@aboutwd for this I think you will need to fork and make some changes in this section: https://github.com/jackducasse/caleandar/blob/master/js/caleandar.js#L207

The events are in Calendar.Model. In one of the else's you may check if there's an event, even being outside the month's scope and print it.