Scheduler Editor Styling with Parts

Question and Answers
1

Being able to control styles with parts is awesome, but there are various parts that don’t seem to be exported. This is beginning to feel like there are just too many important styles that I can’t access to actually use this. Here is an example:

image
image223×287 21.6 KB

I am trying to target the Timezone button, and have tried to throw styles at it to try to get it to work, but nothing seems to be sticking

nylas-scheduler-editor::part(nap__timezone-button) {
  --nylas-base-800: #cbd5e1 !important;
  --nylas-base-900: #cbd5e1 !important;
  --nylas-base-600: #cbd5e1 !important;
  --nylas-base-700: #cbd5e1 !important;
  --nylas-base-300: #374151 !important;
  color: #cbd5e1 !important;
  background-color: #1e293b !important; /* Dark background for option */
  font-size: 14px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

nylas-scheduler-editor::part(sd_dropdown-button-selected-label) {
  --nylas-base-800: #cbd5e1 !important;
  --nylas-base-900: #cbd5e1 !important;
  --nylas-base-600: #cbd5e1 !important;
  --nylas-base-700: #cbd5e1 !important;
  --nylas-base-300: #374151 !important;
  color: #cbd5e1 !important;
  background-color: #1e293b !important; /* Dark background for option */
  font-size: 14px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

Most things are able to be targeted, I can’t figure out a pattern as to why some stuff works and others don’t. That said, this is the first I have used this parts syntax and I am admittedly not a CSS ninja.

Any guidance is appreciated.

2

Okay so using the composability mode seems to work nicely. Much more control. Now just need to figure out how to make it as well constructed as it is in the app mode…

3

So it looks like composable mode with

  <DynamicNylasSchedulerEditor
          mode="composable"
          schedulerPreviewLink={`${window.location.origin}/scheduling/scheduler/?config_id={id}`}
          requiresSlug={false}
          nylasSessionsConfig={{
            clientId: process.env.NEXT_PUBLIC_NYLAS_CLIENT_ID || '',
            redirectUri: `${origin}/scheduling/config`,
            domain: 'https://api.us.nylas.com/v3',
            hosted: true,
            accessType: 'offline',
          }}
          defaultSchedulerConfigState={{
            selectedConfiguration: {
              requires_session_auth: false,
              scheduler: {
                rescheduling_url: `${origin}/scheduling/booking-ref/reschedule?booking_ref=:booking_ref`,
                cancellation_url: `${origin}/scheduling/booking-ref/cancel?booking_ref=:booking_ref`,
              },
            },
          }}
        >
          <NylasEditorTabs />
        </DynamicNylasSchedulerEditor>

even opens up more css control without having to use parts. Certainly a bit to try and figure out but man this is so much better than building this component from scratch. Nice work Nylas scheduler team. I might have missed the docs, but if I didn’t hopefully those are coming. This is next level.