I’m in the process of creating a portfolio and I decided to go with a calendar app…which is proving harder than I thought. Just thinking about how the modeling is going to go horrifies me, but if I can do it well, it will be a chance to show my skills.
But, first, I have to create a calendar.
I have created one, but I’m not too satisfied with the code. I feel like there’s a more efficient way to do so…but for anyone who is curious, here is my code.
1. Create a Day/Date Class
Since I would need the day and dates of certain days, I decided to create a class. In Dart’s DateTime, Sunday is 7, Monday is 1…and Saturday is 6.
2. First Day of Month, Last Day/Date of Month
If the first day of the month is a Sunday (7), there’s no need to calculate the previous month’s last few days. If not, we have insert the last few days at index 0 of a List<int> that will contain all the days to show on the calendar.
Then add all the days of the month. And depending on the day of the last day of the month, add extra few days of the next month. (FYI, I haven’t taken into account leap years).
Now, we have all the days we need to show on the calendar. I plan on dividing these days by 7 and generating rows.
3. Creating the Top Row
4. Creating the DateTile
There are two booleans I need for my DateTile. (1) whether it is a Sunday (index = 0) and (2) whether it is this month. This is all contained in my Day class.
This is the class for my DateTile which extends Day, and uses Day’s named constructor “withWeekIndex.”
I wanted to show “today’s” date differently so used a method + a static variable.
static final Day today = Day.today();bool isSame({required DateTileData date1, required Day date2}){
if (date1.date == date2.date && date1.month == date2.month && date1.year == date2.year) {
return true;
} else {
return false;
}
}
5. SelectedMonth Model
6. Calendar Provider
Note: currently, my classes contain some methods to change its properties, but I plan on taking them out to a service class.
7. Time Provider
I need the calendar provider in main.dart as it is required in the main page, and time provider, I only need it in the add_event_page. The time provider provides the initial start and end time on the add_event_page. This is how I set it up using Provider.
Now…I have to add all the calendar functionalities and connect it to a server!
