How do I display the next weekly recurring date in a schedule using JavaScript?

Question

I need to use JavaScript to display the next event on a recurring weekly basis on a website. Let's say we start an event every 10am every Saturday - I'll need it to display that the next event begins on "Saturday, (Month) (Date) at 10am".

The only thing that I need to be dynamic on the website is the date of the next event (both month and date).

Idea 1: One way I started thinking about it I would need to and have some sort of a starting reference calendar date from where the schedule starts, and then some pattern of n-days to calculate the upcoming dates from that starting point and compare those against todays date, then display the result of the next in the sequence

Idea 2: Instead of using a pattern of N-days to calculate from a hard-coded reference point, what if I coded the day of the week the event occurs and check against that, calculating the date by comparing the days of the week and adding to todays date (would have to account for rollovers at 28/30/31 days and a way to account for which months max out at which number)

Maybe I'm way off-base in my thinking, but any help here would be appreciated. I'm learning JavaScript and coming from an HTML+CSS background using jQuery plugins if that helps frame your answer in a way I'll grasp.

score 1 · Accepted Answer · answered Sep 27 '13 at 17:47

1

Here is a rough solution that may work. It's just general code that you will need to debug but I think it's a good starting point! Date() is a built-in JavaScript object.

var today = new Date();
//var dd = today.getDate();    *just some sample functions of Date()*
//var mm = today.getMonth()+1; *January is 0!*

if(today.getDay() == 6) alert('it is saturday');
// today.getDate() < 8   *this can be used to check where in the month a day falls
// if you want only first, second, third, etc., Saturday

Please let me know if this helps at all!

answered Sep 27 '13 at 17:47

HC_

1,040
10
23

Thanks, that's some good information and at least now I have something to look up! This seems to be going down the path in **Idea 2**, I'll see what I can find about Date() – innovati Sep 27 '13 at 18:02
How far ahead from the current date that a user looks at your website, do you need to mark events? I.e. if a user visits on Feb 1st, what "sample dates" would your goal need you to acquire? – HC_ Sep 27 '13 at 18:05
These events will be happening each week, so I need it to display the single, next upcoming event. If it happens at 10am Saturday, I want it to display the date and month of the next saturday on the calendar. when the day becomes that date, I need it to display the next saturday until that date is reached for example… – innovati Sep 27 '13 at 19:43

score 0 · Answer 2 · answered Jun 17 '19 at 06:57

You could use rSchedule for this (a javascript recurrence library which I maintain).

Example:

Let's say we start an event every 10am every Saturday

import { Schedule } from '@rschedule/rschedule';
import { StandardDateAdapter } from '@rschedule/standard-date-adapter';

const schedule = new Schedule({
  rrules: [{
    frequency: 'WEEKLY',
    // the hypothetical start datetime of your recurring event
    start: new Date(2019, 5, 15, 10),
  }],
  dateAdapter: StandardDateAdapter,
});

The only thing that I need to be dynamic on the website is the date of the next event (both month and date).

// get standard javascript iterator for occurrences starting after now
const iterator = schedule.occurrences({
  start: new Date()
})

// the next date
const nextDate = iterator.next().value;

// or iterate over all future occurrences
for (const date of iterator) {
  // do stuff...
}

How do I display the next weekly recurring date in a schedule using JavaScript?

2 Answers2