Implement year view in calendar of event screen for both admin and user portal

[aashimawadhwa]

Is your feature request related to a problem? Please describe.
The current calendar interface lacks a comprehensive overview for long-term planning, particularly a year-to-year breakdown that provides insights into activities across all months.

Describe the solution you'd like
Implementation of a year view in the calendar, where all months and their associated activities for the entire year are listed. This feature aims to facilitate long-term planning and enhance the user's ability to visualize and manage yearly schedules effectively.

Describe alternatives you've considered
NA

Approach to be followed (optional)
To address this need, we recommend incorporating a year view feature into the calendar interface. This view should comprehensively list all months and their corresponding activities, providing users with a bird's-eye view of their yearly schedule.

Additional context

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[KshitijTodkar48]

I would like to work on this. Please assign it to me.

[AVtheking]

I would like to work on this issue

[Pranavx1]

Can i work on this?

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

Removing assignment due to inactivity

[Pranavx1]

Can i work on this?

[Pranavx1]

when user is in year view should it cover the entire page ?

[Pranavx1]

i had to change the months to render with 6 weeks in all cases in order to maintain reusability of code. please tell me what other changes i need to make before making a PR ?

[Pranavx1]

I had to change the render days function to render every month with 6 weeks in order to maintain reusability.
Other than that tell me what other changes i need to make.
@aashimawadhwa

[aashimawadhwa]

Yes design wise, can you replicate the Google calendar which i have uploaded on the issue? They've managed to used single screen for it all the months are in one screen . We can remove the huge green border and keep it minimal. There's no need to render events in year view. On clicking the date the event should render in a modal . Please check fhe behaviour in Google calendar.
@Pranavx1

[Pranavx1]

Will continue working on the issue as soon as i resolve the continous reloading bug in talawa-admin.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

@Pranavx1 Are you working on this now?

[Pranavx1]

@Cioppolo14 No

[DecodeAndCode]

i would like to work on this issue.

[DecodeAndCode]

@aashimawadhwa instead of showing all the months inspite of having or not having event in that month we can only show the event of the months like this.

Screen.Recording.2024-03-06.at.1.31.13.PM.mov

[aashimawadhwa]

Hey @DecodeAndCode we want something similar to the google calendar year view. This is something which is not going well with the design and aesthetic.

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

@DecodeAndCode When will you have a PR ready for this?

[DecodeAndCode]

@Cioppolo14 This week

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

Unassigning due to no activity or open PR

[Anvita0305]

Hello, I would like to work on this issue. Can you please assign it to me? Thanks!

[palisadoes]

FYI

1. @duplixx is working on something similar. There may need to be coordination
   1. USER REDESIGN: redesign the Event screen for the talawa user portal #1608
2. @aashimawadhwa has the year view mode design changed?

[duplixx]

FYI

1. @duplixx is working on something similar. There may need to be coordination

   1. USER REDESIGN: redesign the Event screen for the talawa user portal #1608

2. @aashimawadhwa has the year view mode design changed?

@Anvita0305 let me know how are you thinking about implementing this, I am working on a similar issue and it will be helpful to co-ordinate in this

[aashimawadhwa]

We need a similar design as i have attached in the picture in issue. We want something lean , not too kuch on to the face. For refrence check out google calendar's year view. Nothing is changed
@Anvita0305

[Anvita0305]

Hello, I have created Yearly calendar view for the admin portal. Can you please check the design and suggest for improvements if any? Thanks! @palisadoes @aashimawadhwa
Yearly Calender.webm

[palisadoes]

Thanks for the video.

1. We have recently updated the UI/UX for the monthly calendar view

   

2. Please make the design reflect the original issue comment. It matches the new UI/UX.

   1. Place the year between the brackets < and >

      

[Anvita0305]

Hello, I have tried to make design similar to the given one and matching the latest UI. Can you please check it? Thanks!

1. With Events
   
2. Without Events
   
3. List of events on the given date
   

[palisadoes]

Thanks.

1. I've noticed that Google Calendar doesn't color code the days with scheduled meetings / events. This is probably because it reduces the API I/O. We should use the same approach.
2. Google does have the feature of showing the event listing modal when a day is clicked on. This should be maintained.
3. Please submit a PR to add this feature in both the Admin and User portals

[Anvita0305]

Thanks.

1. I've noticed that Google Calendar doesn't color code the days with scheduled meetings / events. This is probably because it reduces the API I/O. We should use the same approach.

Then how can we indicate whether there are any events scheduled for the day?

[palisadoes]

Please see how it's done in Google calendar. The expectation is that the user will click the date to see the information. I think it's done this way to reduce traffic on their API at a global scale.

With this design there will be either one query for all calendar entries that are then parsed, or 365 queries. In either case the API load could be too much.