Conversation
github-actions
bot
added
dependencies
compwron
requested review from
FireLemons,
elasticspoon and
schoork
as code owners
compwron
force-pushed
the
replace-calendar-library
branch
from
b2b573a to
4b88c4c
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR migrates the calendar functionality from the deprecated add2calendar package to the modern add-to-calendar-button web component library (version 2.12.12).
Key changes:
- Replaced
add2calendar(v1.1.8) withadd-to-calendar-button(v2.12.12) and its dependencytimezones-ical-library - Updated JavaScript implementation to use web components instead of the old API
- Modified court dates display to include calendar buttons with improved styling
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated dependency from add2calendar to add-to-calendar-button |
| package-lock.json | Reflected dependency changes including new timezones-ical-library transitive dependency |
| app/views/casa_cases/_court_dates.html.erb | Added calendar button rendering for each court date with proper date formatting |
| app/javascript/src/add_to_calendar_button.js | Migrated from old Add2Calendar API to web component creation with proper attribute setting |
| app/assets/stylesheets/pages/casa_cases.scss | Added flexbox styling for court date rows and calendar button sizing |
| app/assets/stylesheets/application.scss | Removed obsolete add2calendar stylesheet import |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| button.setAttribute('startDate', calendarButton.dataset.start) | ||
| button.setAttribute('endDate', calendarButton.dataset.end) | ||
| button.setAttribute('description', calendarButton.dataset.title) | ||
| button.setAttribute('options', "'Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo'") |
There was a problem hiding this comment.
The options attribute value has incorrect quoting. The inner single quotes will be interpreted as part of the string literal instead of being parsed as individual options. This should be a JSON array format. Change to: button.setAttribute('options', \"['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']\") or use the documented array format for the add-to-calendar-button library.
| button.setAttribute('options', "'Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo'") | |
| button.setAttribute('options', '["Apple","Google","iCal","Microsoft365","Outlook.com","Yahoo"]') |
| .court-date-row { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; |
There was a problem hiding this comment.
[nitpick] Consider using a consistent spacing unit. The codebase appears to use pixel values elsewhere, but it would be better to use a spacing variable or rem units for consistency and accessibility. For example, gap: 0.625rem; (equivalent to 10px at default font size).
| gap: 10px; | |
| gap: 0.625rem; |
| .a2cldr { | ||
| width: 120px !important; | ||
|
|
||
| .a2cldr-btn { | ||
| width: 120px !important; | ||
| font-size: 12px; | ||
| padding: 4px 8px; | ||
| text-align: center; | ||
| } | ||
| } |
There was a problem hiding this comment.
The .a2cldr class selector appears to be from the old add2calendar library. With the migration to add-to-calendar-button, these selectors may no longer match the actual DOM elements generated by the new web component. Verify that these CSS rules target the correct elements in the new library, or update the selectors to match the new component's structure.
1 participant
https://www.npmjs.com/package/add-to-calendar-button