marcelarie/js-calendar

JS-Calendar

js-calendar's Issues

Calendar // Each event will only display the event title in the calendar.

Event Form // When the event is saved it should be added to the exact day of

28/11/2020

1. Brainstorming.
2. Git project.
3. Layout general.

Event Form // Checkbox Remaind expire

Checkbox // Both dates should store the date and time.

Event Form // Title

Event Form Details // Title with 60 char MAX + required.

Event Form // Checkbox End Date

Calendar // Event Title

• Render the event title in the same day in the calendar
• Container details event

Event Form // Click on background to exit.

Calendar // Body Header (day of the week)

Calendar // The modal with the event details will also have a button to remove the event from the calendar, which when clicked will remove the event from the exact day of the calendar.

Change the default options of reminder ( first one to 0)

Calendar // Title

Calendar // Custom style current day

Event // Create button

Calendar // If there are more than one event for each day, you should show them

below each other.

Chechbox // This creates an end date to create a duration for the event. The duration will be the time between the start date and the end date.

Checkbox // If the checkbox is checked, it will display a new input to add a date to save the end date of the event.

Event Form // Description event max 500 characters.

Calendar // Button create event on hover

Calendar // Show the calendar on the current month.

Header // Button new event.

Calendar // Each day of the month can have events so you should be able to create new events and add them to the calendar.

30/11/2020

Event Form // Press ESC to exit.

Event // Event container

Disable create button if required field its empty.

Checkbox // The date should be rendered in the local format of the user, you can use something similar to Intl.dateTimeFormat

Event // Event Close Button

Header // calendar title.

Calendar // If the user wants to see all the details of the event, clicking on the event name in the calendar day will open a new modal window with all the information of the event.

Event Form Details // Initial date with time + required.

Event Form // Type of event selector. ( Meeting, personal, study....)

Event Form Details // You must check that the date corresponds to one in the available months.

Event Form // Initial Date selector

Event Form // Event type selector

29/11/2020

FINISHED
1. Body Header of the days of the week.
2. Calendar month grid.
3. Button new event (base html).
4. Calendar title that shows current month and year.
5. Show the calendar on the current month.
6. Diego Armando Maradona.
7. The current month starts on the proper week day.
8. Flex-box inside day boxes for events to cover the space dinamically.
9. Basic desing structure of the grid.

Calendar // Body (day of the month) grid (7x5)

Event Form // Time selector

Event Form // Full width transparent background color.

Calendar // The modal should be closable with a close button, the escape key and by clicking on the transparent background that fills the entire screen.

Event // Delete button

Checkbox // You must use the ​ setInterval​ function to check every 10 seconds if the event date had the reminder checkbox selected and the end date is before the current date and time.

Header // Open event form when the header button is clicked.

Event Form Details // The required fields must be completed before confirming the event.

Event Form // Container of self.

Calendar // Mobile first

Checkbox // ○ Checkbox to set a reminder that lets the user know when an event will expire.

• If the checkbox is selected it will show a select element with the options:
  ■ 5 minutes before
  ■ 10 minutes before
  ■ 15 minutes before
  ■ 30 minutes before
  ■ 1 hour before

Event Form // End date selector