starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #4409] Add calendar page #4242

New Issue
Open
opened 2026-04-25 00:18:57 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:18:57 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4409
Author: @mfcar
Created: 6/14/2025
Status: 🔄 Open

Base: master ← Head: mf/calendarSupport

📝 Commits (5)

  • 0dc1b69 Add calendar page
  • 8543313 Renames
  • 40d0359 Add calendar link to toolbar in smaller resolution
  • 3381379 Add weekend color background
  • 51081f7 Merge branch 'master' into mf/calendarSupport

📊 Changes

10 files changed (+546 additions, -1 deletions)

View changed files

📝 client/components/app/BookShelfToolbar.vue (+10 -1)
📝 client/components/app/SideRail.vue (+9 -0)
📝 client/pages/config/index.vue (+14 -0)
➕ client/pages/library/_library/calendar.vue (+384 -0)
📝 client/store/globals.js (+12 -0)
📝 client/strings/en-us.json (+32 -0)
📝 server/Server.js (+1 -0)
📝 server/controllers/LibraryController.js (+80 -0)
📝 server/objects/settings/ServerSettings.js (+3 -0)
📝 server/routers/ApiRouter.js (+1 -0)

📄 Description

Brief summary

This PR introduces a calendar view for podcast libraries that allows users to visualize when podcast episodes were published. Users can navigate between months and years, and click on episodes to view their details.
I also introduced a new setting to set the first day of the week. The calendar respects that preference.

Which issue is fixed?

This doesn't fix a specific existing issue.

In-depth Description

The calendar view provides a month based visualization of podcast episodes, making it easier to find episodes from specific time periods, these are the changes:

  • Month/year navigation using dropdowns
  • "Today" button to back to the current month
  • Header with layouts for desktop and mobile screens
  • Episodes displayed as colored cards on their publication dates (colors based on podcast ID)
  • Respects user's first day of week preference (Sunday/Monday)
  • View episode details using the existing modal (like the Latest page)
  • Added new server endpoint /api/libraries/:id/episodes-calendar for fetching episodes within date ranges
  • Added setting calendarFirstDayOfWeek to the configuration page
  • It's Month View only, because I built the calendar component to keep it lightweight and avoid external dependencies

Important

For now, this is only for podcast episodes, in the future I want to expand to Audiobooks (I need to think in some details like, what happens when the user click on a Audiobook item, etc). I also want to expand to show other events like: RSS Feed scheduling for podcasts, Backup dates (need to check if it is possible), etc

How have you tested this?

Testing Environment:

  • macOS
  • Google Chrome (137.0.7151.104)
  • Safari (18.5)

Test Scenarios:

  • Tested month/year navigation
  • Tested "Today" button and highlighting of current day
  • Verified episode details modal opens correctly when clicking episode
  • Tested first day of week setting (Sunday vs Monday start)
  • Verified calendar updates properly when changing the setting
  • Empty months (no episodes)
  • Months with many episodes per day

Screenshots

New "First day of week" setting.

Screenshot 2025-06-14 at 17 14 22

Calendar button only for podcast libraries

Screenshot 2025-06-14 at 17 14 50

Calendar view

Screenshot 2025-06-15 at 11 38 00

Episode details

Screenshot 2025-06-14 at 17 15 14

Layout for smaller screens

Screenshot 2025-06-15 at 11 38 40

Video

https://github.com/user-attachments/assets/6f28c4e0-5e9f-44e7-9dc2-55a3ddea4e5d

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/4409 **Author:** [@mfcar](https://github.com/mfcar) **Created:** 6/14/2025 **Status:** 🔄 Open **Base:** `master` ← **Head:** `mf/calendarSupport` --- ### 📝 Commits (5) - [`0dc1b69`](https://github.com/advplyr/audiobookshelf/commit/0dc1b693059d418c1bc80361a430c6e3e92184a3) Add calendar page - [`8543313`](https://github.com/advplyr/audiobookshelf/commit/854331318eb7fadf79f7cfb5e9c7a3d403f8ee67) Renames - [`40d0359`](https://github.com/advplyr/audiobookshelf/commit/40d03596ac02ebc630cecae796e8bb5674e97bd8) Add calendar link to toolbar in smaller resolution - [`3381379`](https://github.com/advplyr/audiobookshelf/commit/33813794e4cf47388da7b3d9d3f68b52368f238c) Add weekend color background - [`51081f7`](https://github.com/advplyr/audiobookshelf/commit/51081f71b096e588f3bdbab840a284414cef03e0) Merge branch 'master' into mf/calendarSupport ### 📊 Changes **10 files changed** (+546 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `client/components/app/BookShelfToolbar.vue` (+10 -1) 📝 `client/components/app/SideRail.vue` (+9 -0) 📝 `client/pages/config/index.vue` (+14 -0) ➕ `client/pages/library/_library/calendar.vue` (+384 -0) 📝 `client/store/globals.js` (+12 -0) 📝 `client/strings/en-us.json` (+32 -0) 📝 `server/Server.js` (+1 -0) 📝 `server/controllers/LibraryController.js` (+80 -0) 📝 `server/objects/settings/ServerSettings.js` (+3 -0) 📝 `server/routers/ApiRouter.js` (+1 -0) </details> ### 📄 Description ## Brief summary This PR introduces a calendar view for podcast libraries that allows users to visualize when podcast episodes were published. Users can navigate between months and years, and click on episodes to view their details. I also introduced a new setting to set the first day of the week. The calendar respects that preference. ## Which issue is fixed? This doesn't fix a specific existing issue. ## In-depth Description The calendar view provides a month based visualization of podcast episodes, making it easier to find episodes from specific time periods, these are the changes: - Month/year navigation using dropdowns - "Today" button to back to the current month - Header with layouts for desktop and mobile screens - Episodes displayed as colored cards on their publication dates (colors based on podcast ID) - Respects user's first day of week preference (Sunday/Monday) - View episode details using the existing modal (like the Latest page) - Added new server endpoint /api/libraries/:id/episodes-calendar for fetching episodes within date ranges - Added setting calendarFirstDayOfWeek to the configuration page - It's Month View only, because I built the calendar component to keep it lightweight and avoid external dependencies > [!IMPORTANT] > For now, this is only for podcast episodes, in the future I want to expand to Audiobooks (I need to think in some details like, what happens when the user click on a Audiobook item, etc). I also want to expand to show other events like: RSS Feed scheduling for podcasts, Backup dates (need to check if it is possible), etc ## How have you tested this? ### Testing Environment: - macOS - Google Chrome (137.0.7151.104) - Safari (18.5) ### Test Scenarios: - Tested month/year navigation - Tested "Today" button and highlighting of current day - Verified episode details modal opens correctly when clicking episode - Tested first day of week setting (Sunday vs Monday start) - Verified calendar updates properly when changing the setting - Empty months (no episodes) - Months with many episodes per day ## Screenshots New "First day of week" setting. --- <img width="339" alt="Screenshot 2025-06-14 at 17 14 22" src="https://github.com/user-attachments/assets/668a6e19-9595-42a7-85b3-e5082d17e4da" /> Calendar button only for podcast libraries --- <img width="341" alt="Screenshot 2025-06-14 at 17 14 50" src="https://github.com/user-attachments/assets/d26426b3-fa22-4b4e-b7bc-d9690b6fcccb" /> Calendar view --- <img width="1216" alt="Screenshot 2025-06-15 at 11 38 00" src="https://github.com/user-attachments/assets/004b2f36-a29f-405c-9c23-420171e24a38" /> Episode details --- <img width="1059" alt="Screenshot 2025-06-14 at 17 15 14" src="https://github.com/user-attachments/assets/6fc203a7-9be7-44ef-bc1b-aa6788e06a15" /> Layout for smaller screens --- <img width="586" alt="Screenshot 2025-06-15 at 11 38 40" src="https://github.com/user-attachments/assets/0884af32-a418-4d25-a417-6b98f454a30c" /> Video --- https://github.com/user-attachments/assets/6f28c4e0-5e9f-44e7-9dc2-55a3ddea4e5d --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:18:57 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4242
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?