- Products
- Solutions Use casesBy industry
- Developers
- Resources Connect
Email API
Calendar API
Scheduler
Contacts API
ExtractAI
Salesforce email integration
Google email & calendar integration
Outlook email & calendar integration
IMAP integration
Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Intelligent data extraction
Ecommerce
Telehealth
Real estate
Financial technology
Educational technology
Expense management
Customer relationship management
Applicant tracking system
Communications platform
Marketplaces
Document management
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Inspiration gallery
Partners
Build vs. buy
Customer stories
Security & Compliance
Why Nylas
Newsroom
Jump to section
Featured articles
Jump to section
Introduction
We’re excited to announce the launch of the Nylas Scheduler v3! Web applications must deliver a user experience that aligns with your product brand and design. Customizing a third-party user experience builds trust and confidence with your users. One powerful feature that enables the customization of third-party web components is CSS Shadow Parts.
Using CSS Shadow Parts with the Nylas Scheduler allows us to create highly personalized scheduling experiences for your users. This blog post is an overview of how to customize your user experience using the Nylas Scheduler!
Understanding CSS Shadow Parts: The Basics
Previously, being able to override an HTML element was challenging because the styles were not scoped or encapsulated. The solution is using a Shadow DOM that isolates parts of the Document Object Model (DOM). The idea behind encapsulation is that we can apply styles and scripts to specific parts of the DOM, ensuring no effects on other elements outside the shadow tree.
For example, consider the goal of applying styling to a specific button, but it will apply to all buttons with similar HTML attributes (i.e. globally styled). The way forward is by using CSS Shadow Parts, where you can style specific elements inside a shadow DOM.
Let’s take a look at an example of how to use CSS Shadow Parts. Below is an example of some HTML:
<nylas-component>
<div part="header">Header</div>
<div part="body">Body</div>
</my-component>The attribute part= is used to identify specific parts of the HTML that we can modify and style using CSS Shadow parts. In CSS, we’ll use the ::part pseudo-element to specify which HTML elements we want to customize styles:
nylas-component::part(header) {
background-color: blue;
}
nylas-component::part(body) {
font-size: 14px;
}Now we went over how to customize the styling of HTML using CSS Shadow Parts!
Nylas Scheduler Mode: App and Composable
The Nylas Scheduler comes in two different configurations: app and composable. By default, Scheduler is set to app mode and this allows for minimal configuration as all components are visible by default. Switching to composable enables more configuration where the developer can determine how the components are arranged in the UI.
Check out our Scheduler UI component reference to learn more about each individual component used in the Scheduler.
Applying CSS Shadow Parts to Nylas Scheduler
Next, let’s take a look at how to customize the styling of the Nylas Scheduler using CSS Shadow Parts. The Nylas Scheduler enables users to create and manage scheduling pages seamlessly and consists of various components like calendars, forms, and buttons which can be customized using CSS with the CSS Shadow Parts pseudo-element selector.
Note for the following changes, we are going to use the Nylas Scheduler in default app mode so the pattern for customizing styling will be as follows:
nylas-scheduling::part(ndp__date) {
font-size: 10px;
}When the Nylas Scheduler is in composable mode, we need to target the specific component (i.e. nylas-date-picker):
nylas-date-picker::part(ndp__date) {
font-size: 10px;
}Let’s take a look at how we can use CSS Shadow Parts to customize the Nylas Scheduler:
- Modify the font size of the Nylas Date Picker dates
- Emphasize the Nylas Date Picker current data
- Underline the current month on the Date Picker
Let’s explore three possible updates to the Nylas Scheduler component step by step. The first change we are going to make is to modify the font size of the Nylas Date Picker dates.
Let’s first determine the specific part= attribute we need to modify by using the developer tools element inspector:
Using the element inspector, we see the following:
part="ndp__date ndp__date--current-day ndp__date--current-month"The available Shadow Parts are in the component documentation under Shadow Parts for the Nylas Scheduler. Here we notice the ndp__date selector that we need to use to modify the font size of the Nylas Date Picker (npd):
nylas-scheduling::part(ndp__date) {
font-size: 10px;
}Next, let’s take a look at how we can emphasize the current date where we will need to use the ndp__date--current-day selector instead:
nylas-scheduling::part(ndp__date--current-day) {
background: #f8f9fc;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
font-size: 14px;
}Now that we have modified styling of the dates, let’s update the month to be underlined using the ndp__month-header selector:
nylas-scheduling::part(ndp__month-header) {
text-decoration: underline;
}To explore more ways to modify the Nylas Scheduler UI components, take a look at the Nylas Schedule UI docs.
Now we’ve modified the nylas-scheduling component using Shadow CSS parts!
Build Time!
In this blog post, we went over how to use CSS Shadow Parts to customize the Nylas Scheduler. By customizing the user experience, we can better integrate tools and libraries like scheduling workflows into our application to provide a seamless user experience.
You can sign up for Nylas for free and start building! Continue building with Nylas by exploring different quickstart guides or by visiting our developer documentation.
