Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cal Atoms: scheduleContainer class in AvailabilitySettings customClassNames not being applied #18958

Open
vaibhav135 opened this issue Jan 28, 2025 · 1 comment
Labels
🐛 bug Something isn't working ui area: UI, frontend, button, form, input

Comments

@vaibhav135
Copy link
Contributor

vaibhav135 commented Jan 28, 2025

Issue Summary

The scheduleContainer class within scheduleClassNames in AvailabilitySettings component is not being applied to the schedule container element, while other classes like scheduleDay are working correctly. This prevents customization of the schedule container's styles.
Steps to Reproduce

  • Import AvailabilitySettings from @calcom/atoms
  • Implement the component with customClassNames prop:
<AvailabilitySettings
    customClassNames={{
        scheduleClassNames: {
            scheduleContainer: 'border-2 border-red-500', // Not working
            scheduleDay: 'bg-blue-500',  // Works correctly
        },
    }}
    enableOverrides={true}
    disableToasts={true}
    disableEditableHeading={true}
/>
  • Observe the rendered component in browser

Actual Results

  • scheduleDay class is successfully applied to day elements
  • scheduleContainer class is not being applied to the container element
  • No visual changes are seen when modifying scheduleContainer styles

Expected Results

  • Both scheduleContainer and scheduleDay classes should be applied to their respective elements
  • Visual changes should be visible when modifying scheduleContainer styles
  • Consistent behavior across all customClassNames properties

Technical details

  • Browser: Firefox
  • @calcom/atoms version: 1.0.84
  • The type definitions correctly show scheduleContainer as part of CustomClassNames type:
export type CustomClassNames = {
    scheduleClassNames?: {
        scheduleContainer?: string;  // Defined in types but not working
        scheduleDay?: string;        // Working correctly
        // ...other properties
    };
}

Evidence

image image
@vaibhav135 vaibhav135 added the 🐛 bug Something isn't working label Jan 28, 2025
@dosubot dosubot bot added the ui area: UI, frontend, button, form, input label Jan 28, 2025
@Jai2082001
Copy link

Can i try solving the bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working ui area: UI, frontend, button, form, input
Projects
None yet
Development

No branches or pull requests

2 participants