This is a calendar web application that utilizes jQuery AJAX requests to communicate with a PHP back-end. It allows users to navigate a fully working calendar where they can set reminders for events and such. If you'd like to analyze the code you can download the project files using the button at the bottom of this page.
The image above shows the main page of the web application. To navigate the calendar, the user can click on the arrows on the top left of the screen. On the top right, there's a "Today" button that takes to the current month. There's also a menu button that opens up a menu on the right side of the screen; this will be shown below later on. The actual calendar days have one day that's brighter than the others, and that's the current day's number, so the screenshot above was taken on the 27th of April, 2019.
Clicking on one of the days opens up a little floating pane on the right side of the screen. There are two input fields, one for the title of the event, and another for additional details. Clicking confirm creates an event on the calendar. An event cannot be created without a title.
When the user clicks on the "Confirm" button, the day they chose for that event lights up to signify that there is in fact an event on that day.
The user can create as many events as they want. The website's accent colors are orange and pink as seen in the gradient of the navigation bar. This accent color carries over to the calendar as well. Similar to the gradient on the navigation bar, the different blocks representing each day are a different color, the odd ones being orange and the even ones being pink, resulting in a recreation of the gradient in the navbar.
Clicking on the menu icon on the top right opens up the menu on the right side of the screen. This menu allows the user to view all the events they've set up, change their username, change their password, or delete all their events.
Clicking on the "Event List" button in the menu opens yet another menu that shows all the user's events as a list. The list separates the events by month and allows the user to click a "View" button that takes them to that event's month.
Clicking on a day of the calendar that has an event reopens the floating menu, allowing the user to edit the event's details, mark it as complete, or delete the event.
Marking an event as finished makes the event glow green.
If the user doesn't want to use the arrows to go through the months of the year, they can click on the month name, which opens up a menu that allows the user to pick a month from the list.
The calendar is extremely responsive, adapting to every screen size. The image above shows a screen size of about 450px, which would be a bit larger than a phone.
This image shows a screen size of about 350px, which is closer to the average screen size of a typical phone. The "Today" button turns into a target icon to make some room for the arrows.
The image above shows the smallest form factor possible before the different elements start colliding with one another. The screen size here is about 280px. The site's elements don't collide until a screen size of 230px or smaller, which is smaller than any practical screen size. For example, an iPhone 4 has a screen width of 320px.
The full web app can be downloaded using the button below, but this version doesn't include the ability to use an account to login and such, but these features can easily be added as the AJAX requests and such are already built in. The calendar itself is fully functional and the user can set up events as described above.