FullCalendar Event Customization
Budget: $10 – $20 USD
We are looking for an expert Javascript coder with experience customizing FullCalendar.io Javascript Calendar to customize Events.
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.
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.
I should be able to assign an image URL when adding/creating a new event.
Populate Events table with some sample events.
This is the original default day view :
https://skyviq.com/fullcalendardayview.jpg
Events have blue background color and white text. I've modified it so that events have a transparent background and black text.
I'd like you to change display of background Event Color so that only a vertical blue color stripe is displayed to the left of the event text as follows:
https://skyviq.com/fullcalendarnewdayview.jpg
When I click to add/create a new event, please override the current add event modal popup and allow ability to simply click on a timeslot to type in event text directly inline as follows:
https://skyviq.com/fullcalendarnewdayviewaddevent.jpg
Similarly, I should be able to click on timeslot to directly edit the event text inline:
https://skyviq.com/fullcalendarnewdayviewinlineeditevent.jpg
If I hover mouse over the timeslot, a round (or square) hollow outline should appear on right-hand side of event timeslot that is a hot clickable area:
https://skyviq.com/fullcalendarnewdayviewhover.jpg
Clicking on the hot clickable area should display a drop-down context menu that allows me to either delete the event or to change the color of the initial vertical bar before the event text.
https://skyviq.com/fullcalendarnewdayviewhovermenu.jpg
Thus, if I were to select "Green" in the drop-down context menu, the vertical bar color before the event text should change from blue to green color. Or I could click "Delete" to delete the event.
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.
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.
I should be able to assign an image URL when adding/creating a new event.
Populate Events table with some sample events.
This is the original default day view :
https://skyviq.com/fullcalendardayview.jpg
Events have blue background color and white text. I've modified it so that events have a transparent background and black text.
I'd like you to change display of background Event Color so that only a vertical blue color stripe is displayed to the left of the event text as follows:
https://skyviq.com/fullcalendarnewdayview.jpg
When I click to add/create a new event, please override the current add event modal popup and allow ability to simply click on a timeslot to type in event text directly inline as follows:
https://skyviq.com/fullcalendarnewdayviewaddevent.jpg
Similarly, I should be able to click on timeslot to directly edit the event text inline:
https://skyviq.com/fullcalendarnewdayviewinlineeditevent.jpg
If I hover mouse over the timeslot, a round (or square) hollow outline should appear on right-hand side of event timeslot that is a hot clickable area:
https://skyviq.com/fullcalendarnewdayviewhover.jpg
Clicking on the hot clickable area should display a drop-down context menu that allows me to either delete the event or to change the color of the initial vertical bar before the event text.
https://skyviq.com/fullcalendarnewdayviewhovermenu.jpg
Thus, if I were to select "Green" in the drop-down context menu, the vertical bar color before the event text should change from blue to green color. Or I could click "Delete" to delete the event.
We are looking for a long-term relationship with the right coder and have several projects in the pipeline.