Show in a repeater today's and upcoming's events

Ask the community
, , ,
1

Hey,

I’m working on a website (using Wix Studio). It’s for a small movie theater.

I have a collection in my CMS named Screenings. There’s a date field named #dateEvent.

There are some special screenings and/or screenings with guests. I’ve added a boolean in my CMS, when true it means that it’s a special screening or that there will be guests. Let’s call these screenings Events.

In my homepage, I want to showcase only the upcoming Events. I simply added to my dataset a filter (boolean > True).

However, even if plenty of people met the same problem on the forums, I can’t find an actual way to solve my problem : How to showcase today’s and upcoming’s events ?

Here’s my code so far:

import wixData from 'wix-data';

$w.onReady(function () {
  let today = new Date();

  $w("#datasetEvent").setFilter(
    wixData.filter()
      .gt("dateEvent", today) 
  );
});

When previewing the website, it doesn’t show any Event at all. I also tried

.ge("dateEvent", today)

In the CMS, I know I can copy the view to the website but I prefer not to. Plus, I don’t know how to filter properly directly in the CMS. When I add two Filters (Date > Today; Date > Next week) there’s nothing at all. It does work when I chose only one Filter

Thank you

2

Use the console to see the format of the variable today, most likely it doesn’t match the format of the field in the CMS called date event. To match dates both have to be in the same format.

3

The issue can be that today includes the current time.
I have used todayStart before as it is set to midnight at the beginning of the current day.

something like this

import wixData from 'wix-data';

$w.onReady(function () {

    $w('#dynamicDataset').onReady(async () => {
        const today = new Date();

        // Beginning of today at 12:00:00 am
        const todayStart = new Date(
            today.getFullYear(),
            today.getMonth(),
            today.getDate()
        );

        try {
            await $w('#dynamicDataset').setFilter(
                wixData.filter()
                    .eq('isEvent', true)
                    .ge('eventDate', todayStart)
            );

            await $w('#dynamicDataset').setSort(
                wixData.sort()
                    .ascending('eventDate')
            );

            console.log('Upcoming events have been loaded');
        } catch (error) {
            console.error('Error filtering upcoming events:', error);
        }
    });
});
4

Thanks but it unfortunately didn’t work.

I should note that I didn’t build this CMS using Wix Events, and these events and screenings should be considered as a collection started from scratch. I don’t know if it changes anything.

I also tried something else based on your code and the one I had:

import wixData from ‘wix-data’;

$w.onReady(function () {

const today = new Date();

const todayStart = new Date(

        today.getFullYear(),

        today.getMonth(),

        today.getDate()

    );

$w(“#datasetEvent”).setFilter(

wixData.filter()

  .ge("dateEvent", todayStart)

);

});

5

Make sure you’re using a Date & Time field in the CMS, and not just a Date field.

Because I’ve faced similar problems while filtering current and upcoming dates, and it turned out that the Date field type provided in the CMS is what I believe just formatted text. Whereas the Date & Time field is the actual field type that is supported in Javascript, and that should work with for the code that @Dan_Suhr provided, or you can simply set it as a dataset filter without adding any code at all.

However, if you’re setting the filter through a dataset, and the time in the browser is:
24 July 2026, 16:00

And if the event date and time is set to
24 July 2026 10:00

The user will not see it even if the date is the same. So to avoid that from happening, use Dan’s code and switch your CMS column to a Date & Time field instead of a Date field and that should work. You can set the time to anything, for example: 12:00 or the actual time the event starts… although that does not matter because you just need the date anyways.

6

Oh thanks! The explanation made sense. Somehow, the code provided by @Dan_Suhr didn’t work but mine works just as expected now.

For anyone having the same problem :

  1. Make sure your Date field is a Date & Time field

  2. Use this code (change the dataset name and the field name accordingly)

import wixData from 'wix-data';

$w.onReady(function () {

const today = new Date();

const todayStart = new Date(

        today.getFullYear(),

        today.getMonth(),

        today.getDate()

    );

$w('#datasetEvent').setFilter(

wixData.filter()

  .ge("dateEvent", todayStart) 

);

});