Advent Calendar for Christmas

Database Collection

• AdventGift: Stores gift information to be displayed in the repeater: name, image, date gift is given, and the day (1-24) in the calendar.

Page Elements

• Repeater: For displaying the calendar.

• Dataset: For connecting the repeater item elements with the AdventGift database collection content.

Code

The site’s code does the following:

1. For each item in the repeater, compare the current date with the date in the repeater item.

2. For all repeater items where the current date is greater than the repeater item date, display the gift.

3. For the repeater item that matches today’s date, show the calendar day in red instead of black. Visitors can click this number to see today’s gift.

4. For repeater items where the current date is less than the repeater date, hide the gift and show the calendar day.

5. When site visitors click today’s day, show the new gift with an animation.

Note: 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.