Calendar

Calendar components are Input Fields that allow the user to select a single date by interacting with a visual calendar grid.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'calendar',
      path: 'appointmentDate',
      label: 'Calendar',
      props: {
        hint: 'Select a date',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "calendar",
      "path": "appointmentDate",
      "label": "Calendar",
      "props": {
        "hint": "Select a date"
      }
    }
  ]
}

Props

Use these props to customize your Calendar component.

prop	type	description
`hint`	string	A description to display below the calendar
`minDate`	string	Minimum allowable date in ISO format
`maxDate`	string	Maximum allowable date in ISO format
`numberOfMonths`	number	Number of months to display simultaneously. Defaults to 1
`disabledRanges`	array	Array of objects (`{ start: string, end?: string }`) defining disabled date ranges
`prevMonthIcon`	string	Custom CSS class for the “previous month” button icon
`nextMonthIcon`	string	Custom CSS class for the “next month” button icon
`prevMonthAriaLabel`	string	ARIA label for the previous month button
`nextMonthAriaLabel`	string	ARIA label for the next month button

Hint

Use the property hint to add a description.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'calendar',
      path: 'appointmentDate',
      props: {
        hint: 'Please select a valid date for your appointment',
      },
      label: 'Appointment Date',
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "calendar",
      "path": "appointmentDate",
      "props": {
        "hint": "Please select a valid date for your appointment"
      },
      "label": "Appointment Date"
    }
  ]
}

Min and Max Dates

Use the properties minDate and maxDate to specify the boundaries for selectable dates.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'calendar',
      path: 'appointmentDate',
      defaultValue: '2024-01-21T00:00:00.000Z',
      props: {
        minDate: '2024-01-05T00:00:00.000Z',
        maxDate: '2024-02-21T23:59:59.999Z',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "calendar",
      "path": "appointmentDate",
      "defaultValue": "2024-01-21T00:00:00.000Z",
      "props": {
        "minDate": "2024-01-05T00:00:00.000Z",
        "maxDate": "2024-02-21T23:59:59.999Z"
      }
    }
  ]
}

Number of Months

Use the property numberOfMonths to display multiple months side-by-side.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'calendar',
      path: 'appointmentDate',
      props: {
        numberOfMonths: 2,
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "calendar",
      "path": "appointmentDate",
      "props": {
        "numberOfMonths": 2
      }
    }
  ]
}

Disabled Ranges

Use the property disabledRanges to selectively disable specific date blocks within the calendar.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'calendar',
      path: 'appointmentDate',
      defaultValue: '2024-03-21',
      props: {
        disabledRanges: [
          {
            start: '2024-03-10T00:00:00.000Z',
            end: '2024-03-15T23:59:59.999Z',
          },
        ],
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "calendar",
      "path": "appointmentDate",
      "defaultValue": "2024-03-21",
      "props": {
        "disabledRanges": [
          {
            "start": "2024-03-10T00:00:00.000Z",
            "end": "2024-03-15T23:59:59.999Z"
          }
        ]
      }
    }
  ]
}

Custom Icons

Use prevMonthIcon, nextMonthIcon, prevMonthAriaLabel and nextMonthAriaLabel to customize the navigation buttons.

Programmatic
JSON

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'calendar-icons',
      kind: 'input',
      type: 'calendar',
      path: 'date',
      label: 'Custom Icons Calendar',
      props: {
        prevMonthIcon: 'chevron_left',
        nextMonthIcon: 'chevron_right',
        prevMonthAriaLabel: 'Go to previous month',
        nextMonthAriaLabel: 'Go to next month',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "calendar-icons",
      "kind": "input",
      "type": "calendar",
      "path": "date",
      "label": "Custom Icons Calendar",
      "props": {
        "prevMonthIcon": "chevron_left",
        "nextMonthIcon": "chevron_right",
        "prevMonthAriaLabel": "Go to previous month",
        "nextMonthAriaLabel": "Go to next month"
      }
    }
  ]
}

Styling

Calendars can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
`--gui-radius-md`	Calendar container and day button border radius
`--gui-bg-default`	Calendar container background color
`--gui-border-default`	Default border color and cell hover border color
`--gui-space-3`	Internal padding
`--gui-calendar-change-month-button-width`	Width of the next/prev buttons
`--gui-calendar-change-month-button-height`	Height of the next/prev buttons
`--gui-text-default`	Default text and focus border color
`--gui-text-secondary`	Day button hover background color
`--gui-intent-primary-active`	”Today” border highlight color
`--gui-intent-primary`	Selected day background color
`--gui-bg-disabled`	Disabled day background color

Anatomy

This is the anatomy of the Calendar Component in case you want to use your CSS styles.

<gui-calendar>
  <label for="fieldUid">
    Label
    <div class="gui-calendar__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <div class="gui-calendar-input">
      <div class="gui-calendar__container">

        <div class="gui-calendar__months-grid">
          <div>
            <div class="gui-calendar__header">
              <button class="gui-button gui-calendar__month-button gui-calendar__month-button--prev" type="button" aria-label="Previous Month">&lt;</button>
              <span aria-live="polite">March 2024</span>
              <button class="gui-button gui-calendar__month-button gui-calendar__month-button--next" type="button" aria-label="Next Month">&gt;</button>
            </div>

            <div class="gui-calendar__days-grid" role="grid" aria-label="March 2024">
              <div class="gui-calendar__rows">
                <div class="gui-calendar__weekday" role="columnheader">Su</div>
                <div class="gui-calendar__weekday" role="columnheader">Mo</div>
                <div class="gui-calendar__weekday" role="columnheader">Tu</div>
                <div class="gui-calendar__weekday" role="columnheader">We</div>
                <div class="gui-calendar__weekday" role="columnheader">Th</div>
                <div class="gui-calendar__weekday" role="columnheader">Fr</div>
                <div class="gui-calendar__weekday" role="columnheader">Sa</div>
              </div>
              <div class="gui-calendar__rows">
                <!-- Day buttons go here -->
                <button type="button" role="gridcell" class="gui-calendar__day-button other-month" tabindex="-1" disabled="" aria-selected="false">25</button>
                <button type="button" role="gridcell" class="gui-calendar__day-button" tabindex="0" aria-selected="false">1</button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</gui-calendar>