Advent calendar for December with corvid

In this post I will write the code that allows you to perform an action on the elements of a repeater based on the date.

In this case let's assume we want to make an advent calendar where day after day gifts are released, always keeping the gifts of the past days visible.

To do this you need:

-A database with a text field filled in with the date we want the item to unlock. The date must be in yyyy-mm-dd format.

-A repeater connected to the dataset

Here is the code:

$w.onReady(function () {
    showDays();
});

function showDays() {

 // The calendar currently spans December 1-24, 2020 and the current date 
 // is set to December 08, 2020 in order to demonstrate the example.
 // To customize the example:
 // - Update the dates stored in the Day field in the AdventGift database collection to the span of time 
 //   you want to run the calendar.
 // - On the first day of the calendar, comment out the code on Line 15 and uncomment the code on Line 16
 //   so that the current date is set to today's date.

 const currentDate = new Date('2020-12-08');
 // const currentDate = new Date();


    $w("#giftDataset").onReady(() => {
        $w("#adventRepeater").forEachItem(($item, itemData, index) => {
 let fixedItemDate = $item('#calendarDate').text;
 let dateItem = new Date(fixedItemDate);

 if (currentDate.getDate() > dateItem.getDate()) {
                $item('#overlayBox').hide();
                $item('#giftImage').show();
                $item('#nameDateBox').show();
            } else if (currentDate.getDate() == dateItem.getDate()) {
                $item('#redNumberText').show();
                $item('#blackNumberText').hide();

 let slideOptionsOut = {
 "duration": 1700,
 "delay": 1000,
 "direction": "left"
                };

 let slideOptionsIn = {
 "duration": 1700,
 "delay": 0,
 "direction": "right"
                };

                $item('#overlayBox').onClick((event) => {
                    $item('#overlayBox').hide("slide", slideOptionsOut).then(() => {
                        $item('#giftImage').show("slide", slideOptionsIn);
                        $item('#nameDateBox').show("slide", slideOptionsIn);
                    });
                })
            }
        });
    });
}

You can watch my example and make it yours here: https://www.wix.com/corvid/example/advent-calendar-for-christmas