https://mobiscroll.com/docs/assets/js/435c401f.f5333289.js

1"use strict";(globalThis.webpackChunkmobiscroll_docs=globalThis.webpackChunkmobiscroll_docs||[]).push([[13901],{80935(e,n,c){c.d(n,{Ay:()=>d,RM:()=>l});var r=c(74848),s=c(28453);c(83457);const l=[{value:"Eventcalendar variables",id:"eventcalendar-variables",level:2},{value:"iOS theme",id:"ios-theme",level:3},{value:"Windows theme",id:"windows-theme",level:3},{value:"Material theme",id:"material-theme",level:3}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["This page lists the Eventcalendar-specific CSS variables that can be overridden to customize colors and visual states.\nFor general theming concepts and shared theme variables, see the ",(0,r.jsx)(n.a,{href:"../theming/css-variables",children:"CSS variables overview"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"info",children:(0,r.jsx)(n.p,{children:"Variable names and available options may differ between themes, so make sure to override the variables that correspond to the active theme."})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"eventcalendar-variables",children:"Eventcalendar variables"}),"\n",(0,r.jsxs)(n.p,{children:["Variables can be overridden globally on ",(0,r.jsx)(n.code,{children:":root"})," or scoped to a specific container."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-scss",children:":root {\n  --mbsc-eventcalendar-accent: #007aff;\n  --mbsc-eventcalendar-event-color: #34c759;\n}\n\n.my-calendar {\n  --mbsc-eventcalendar-accent: #6200ee;\n}\n"})}),"\n",(0,r.jsxs)(n.admonition,{type:"info",children:[(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Theming & dark mode"})}),(0,r.jsxs)(n.p,{children:["Variables can be overridden globally on ",(0,r.jsx)(n.code,{children:":root"}),", which affects all active themes."]}),(0,r.jsx)(n.p,{children:"To target a specific theme, use its theme selector:"}),(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-windows"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-windows-dark"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-ios"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-ios-dark"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-material"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:".mbsc-material-dark"})}),"\n"]})]}),"\n",(0,r.jsx)(n.h3,{id:"ios-theme",children:"iOS theme"}),"\n",(0,r.jsxs)(n.p,{children:["These variables apply when the ",(0,r.jsx)(n.code,{children:"ios"})," theme is active."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-accent"}),": Selected day, active state, primary highlight color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-on-accent"}),": Text/icons shown on accent background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-bg-color"}),": Main calendar background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-text-color"}),": Default text color (days, labels)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-border-color"}),": Grid lines, separators"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-color"}),": Event background color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-text"}),": Text color inside events"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-mark"}),": Small event dot / indicator color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-input-bg-color"}),": Input background color inside the Eventcalendar (e.g. filters, header inputs)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-highlight"}),": Today / highlighted day background"]}

1),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-time-color"}),": Time labels, week numbers"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-disabled-bg-color"}),": Disabled day background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-parent"}),": Timeline parent row background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-parent-hover"}),": Timeline parent row hover"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-focus"}),": Focus outline color (keyboard nav)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-success"}),": Success state color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-error"}),": Error state color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-popup-bg-color"}),": Event popup background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-popup-list-bg-color"}),": Popup event list background"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"windows-theme",children:"Windows theme"}),"\n",(0,r.jsxs)(n.p,{children:["These variables apply when the ",(0,r.jsx)(n.code,{children:"windows"})," theme is active."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-accent"}),": Selected day / primary accent"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-bg-color"}),": Calendar background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-text-color"}),": Default text color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-border-color"}),": Grid / separator color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-color"}),": Event background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-on-accent"}),": Text color on event background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-mark"}),": Selected marker color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-background-parent"}),": Timeline parent row background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-background-parent-hover"}),": Timeline parent row hover"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-disabled-bg-color"}),": Disabled day background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-disabled-text"}),": Disabled day text"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-success"}),": Success state color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-error"}),": Error state color"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"material-theme",children:"Material theme"}),"\n",(0,r.jsxs)(n.p,{children:["These variables apply when the ",(0,r.jsx)(n.code,{children:"material"})," theme is active."]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-accent"}),": Primary accent / selected day"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-bg-color"}),": Calendar background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-text-color"}),": Default text color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-border-color"}),": Grid / separators"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-color"}),": Event background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-mark"}),": Selected marker color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-text"}),": Event text color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-on-accent"}),": Text/icons on accent background"]}

1),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-event-shadow"}),": Shadow color for events (e.g. selected or dragged events)"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-popup-bg-color"}),": Event popup background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-time-color"}),": Time labels and secondary text color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-disabled-bg-color"}),": Disabled day background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-parent"}),": Timeline parent row background"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-parent-hover"}),": Timeline parent row hover"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-focus"}),": Focus outline color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-success"}),": Success state color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-error"}),": Error state color"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"--mbsc-eventcalendar-schedule-text-color"}),": Schedule view text color"]}),"\n"]})]})}function d(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},33059(e,n,c){c.r(n),c.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>x,frontMatter:()=>d,metadata:()=>r,toc:()=>t});const r=JSON.parse('{"id":"react/eventcalendar/css-variables","title":"CSS variables","description":"Custom CSS variables for the Mobiscroll Eventcalendar (React) \u2014 override colors, sizes, and layout tokens for deep visual customization.","source":"@site/versioned_docs/version-6.1.0/react/eventcalendar/css-variables.md","sourceDirName":"react/eventcalendar","slug":"/react/eventcalendar/css-variables","permalink":"/docs/react/eventcalendar/css-variables","draft":false,"unlisted":false,"tags":[],"version":"6.1.0","sidebarPosition":16,"frontMatter":{"sidebar_position":16,"sidebar_label":"CSS variables","displayed_sidebar":"reactSidebar","title":"CSS variables","description":"Custom CSS variables for the Mobiscroll Eventcalendar (React) \u2014 override colors, sizes, and layout tokens for deep visual customization."},"sidebar":"reactSidebar","previous":{"title":"Accessibility","permalink":"/docs/react/eventcalendar/accessibility"},"next":{"title":"API","permalink":"/docs/react/eventcalendar/api"}}');var s=c(74848),l=c(28453),a=c(80935);const d={sidebar_position:16,sidebar_label:"CSS variables",displayed_sidebar:"reactSidebar",title:"CSS variables",description:"Custom CSS variables for the Mobiscroll Eventcalendar (React) \u2014 override colors, sizes, and layout tokens for deep visual customization."},i=void 0,o={},t=[...a.RM];function h(e){return(0,s.jsx)(a.Ay,{})}function x(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h()}}}]);