FullCalendar Navigation Customization
Budget: $10 – $20 USD
We are looking for an expert Javascript coder with experience customizing FullCalendar.io Javascript Calendar to customize navigation links and integrate image display with PHP/MySQL backend.
I have already done some initial customization in the attached "selectable-freelancer-day.html" file.
Please take a look at the following URL:
https://www.skyviq.com/fullcalendar-6.1.19/examples/selectable-freelancer-day.html
Click on "day" in the header toolbar to display Day View.
I'd like you to integrate both the default header toolbar navigation buttons and custom navigation icons above it with a PHP/MySQL backend such that clicking to advance to next/previous date (in month/week/day views) displays/updates corresponding image (currently apple.png visible by default). Clicking on "Previous/Next/Today" buttons should also update the displayed fruit image accordingly.
1. Create a MySQL database table called "Events" as follows:
Events
+---------+----------------------+---------+-------+------------+-------------------------+
| Field | Type | Null | Key | Default | Extra |
+---------+----------------------+---------+-------+---------+----------------------------+
| EventID | int | NO | PRI | NULL | auto_increment |
| Event | text | YES | | NULL | |
| Start | datetime | NO | | NULL | |
| End | datetime | NO | | NULL | |
| Color | varchar(30) | YES | | NULL | |
| Image | varchar(100) | YES | | NULL | |
| URL | varchar(100) | YES | | NULL | |
+---------+-----------------------+-------+-------+------------+--------------------------+
Create PHP scripts to add/edit/delete events to Events database table.
Populate Events table with some sample events.
2. Create a MySQL database table called "Images" as follows:
Images
+-------------+-----------------------+--------+-----+-------------+--------------------------+
| Field | Type | Null | Key | Default | Extra |
+-------------+-----------------------+--------+-----+-------------+--------------------------+
| ImageID | int | NO | PRI | NULL | auto_increment |
| Name | varchar(100) | YES | | NULL | |
| Image | text | YES | | NULL | |
| URL | varchar(100) | YES | | NULL | |
+-------------+-----------------------+--------+------+------------+--------------------------+
Populate the Images table with the 9 image icons:
ImageID1: apple.png
ImageID2: apricot.png
ImageID3: banana.png
ImageID4: grapes.png
ImageID5: kiwi.png
ImageID6: mango.png
ImageID7: orange.png
ImageID8: pear.png
ImageID9: pomegranate.png
The basic default functionality is that Jan 1 of the year should correspond to ImageID1 (apple.png) and clicking navigation button/icon to advance to next day should display the next image in the table. Thus Jan 9 should display ImageID9 (pomegranate.png) and Jan 10 would start over at ImageID1 (apple.png). Thus the current 9 images in table will be shown in an endless loop as dates advance. I could add additional images in table and the same thing should occur (adjusting to display additional images in sequence).
However, if a particular event in Events table has an Image and URL that is not empty (i.e. special image/url associated with that particular event), then that event should be loaded instead of the corresponding fruit image from Images table. As an example, let's say that EventID3 (for that particular date) has an image of a panda. Then when EventID3 date is loaded the panda image should be displayed instead of banana.png. If the Image/URL for EventID3 is empty, then the banana.png image would be loaded as usual.
Clicking on Previous/Next/Today/Month/Week/Day icons in both standard default header toolbar as well as the new custom navigation icons above it should update the displayed fruit icon images accordingly.
Notice the "October 6, 2025" in bold green color? That should update to the new date when clicking.
Similarly, clicking to go to "Week" view should display "Oct 6 – 12, 2025" in bold green letters between the custom navigation icons (instead of Oct 6, 2025).
Similarly, clicking to go to "Month" view should display "October 2025" in bold green letters between the custom navigation icons (instead of Oct 6, 2025).
We are looking for a long-term relationship with the right coder and have several projects in the pipeline.
I have already done some initial customization in the attached "selectable-freelancer-day.html" file.
Please take a look at the following URL:
https://www.skyviq.com/fullcalendar-6.1.19/examples/selectable-freelancer-day.html
Click on "day" in the header toolbar to display Day View.
I'd like you to integrate both the default header toolbar navigation buttons and custom navigation icons above it with a PHP/MySQL backend such that clicking to advance to next/previous date (in month/week/day views) displays/updates corresponding image (currently apple.png visible by default). Clicking on "Previous/Next/Today" buttons should also update the displayed fruit image accordingly.
1. Create a MySQL database table called "Events" as follows:
Events
+---------+----------------------+---------+-------+------------+-------------------------+
| Field | Type | Null | Key | Default | Extra |
+---------+----------------------+---------+-------+---------+----------------------------+
| EventID | int | NO | PRI | NULL | auto_increment |
| Event | text | YES | | NULL | |
| Start | datetime | NO | | NULL | |
| End | datetime | NO | | NULL | |
| Color | varchar(30) | YES | | NULL | |
| Image | varchar(100) | YES | | NULL | |
| URL | varchar(100) | YES | | NULL | |
+---------+-----------------------+-------+-------+------------+--------------------------+
Create PHP scripts to add/edit/delete events to Events database table.
Populate Events table with some sample events.
2. Create a MySQL database table called "Images" as follows:
Images
+-------------+-----------------------+--------+-----+-------------+--------------------------+
| Field | Type | Null | Key | Default | Extra |
+-------------+-----------------------+--------+-----+-------------+--------------------------+
| ImageID | int | NO | PRI | NULL | auto_increment |
| Name | varchar(100) | YES | | NULL | |
| Image | text | YES | | NULL | |
| URL | varchar(100) | YES | | NULL | |
+-------------+-----------------------+--------+------+------------+--------------------------+
Populate the Images table with the 9 image icons:
ImageID1: apple.png
ImageID2: apricot.png
ImageID3: banana.png
ImageID4: grapes.png
ImageID5: kiwi.png
ImageID6: mango.png
ImageID7: orange.png
ImageID8: pear.png
ImageID9: pomegranate.png
The basic default functionality is that Jan 1 of the year should correspond to ImageID1 (apple.png) and clicking navigation button/icon to advance to next day should display the next image in the table. Thus Jan 9 should display ImageID9 (pomegranate.png) and Jan 10 would start over at ImageID1 (apple.png). Thus the current 9 images in table will be shown in an endless loop as dates advance. I could add additional images in table and the same thing should occur (adjusting to display additional images in sequence).
However, if a particular event in Events table has an Image and URL that is not empty (i.e. special image/url associated with that particular event), then that event should be loaded instead of the corresponding fruit image from Images table. As an example, let's say that EventID3 (for that particular date) has an image of a panda. Then when EventID3 date is loaded the panda image should be displayed instead of banana.png. If the Image/URL for EventID3 is empty, then the banana.png image would be loaded as usual.
Clicking on Previous/Next/Today/Month/Week/Day icons in both standard default header toolbar as well as the new custom navigation icons above it should update the displayed fruit icon images accordingly.
Notice the "October 6, 2025" in bold green color? That should update to the new date when clicking.
Similarly, clicking to go to "Week" view should display "Oct 6 – 12, 2025" in bold green letters between the custom navigation icons (instead of Oct 6, 2025).
Similarly, clicking to go to "Month" view should display "October 2025" in bold green letters between the custom navigation icons (instead of Oct 6, 2025).
We are looking for a long-term relationship with the right coder and have several projects in the pipeline.