Calendar Display Component

Overview

The Groundswell Calendar Display, powered by ToastUI, gives designers the ability to quickly have a modern calendar display in their sites and dashboards with the simplicity of a single component. The dense, versatile display supports different calendar views with styling matching your site’s accent color. Example interfaces and utility rules are attached, which demonstrate usage and features of the component.

Key Features & Functionality

Display an array of events in Daily, Weekly, or Monthly format. Toggle days and weeks using an input parameter.
Automatic timezone shifting. By default, all provided events display in the timezone of your browser, but this can be overridden by providing TZ names ("America/Los_Angeles") OR a timezone code (EDT,CST,etc).
Multiple language support. Currently supports US English (en-US), UK English (en-GB), Spanish (es), Italian (it), Polish (pl), and Portuguese (pt).
Supports different date formats via a parameter.
Supports a detailed event pop-up of time, title, attendees, location, and event description.
Supports custom colors, font sizes, borders, and other attributes via applying custom themes.
Support for visible weeks, weekend display, and start of week for specific locale needs.
Allows event selection, should you want to edit an event or display details in addition to, or in lieu of, the detailed pop-up view.
Allows events to be "rescheduled" via drag and drop or through a modal
Allows events to be created and deleted directly from the calendar
Supports multiple calendars
More details and examples available in attached resources and sample application.

Parents

marcore95 7 months ago

Is there any way to remove the "hand with finger" icon on mouse hover a calendar event on month view? I used the "readOnly: true" field yet into "options" parameter and also in all the event I loaded into "eventsValue", but the event is still clickable (I set to false also the popup from parameters 'useFormPopup' e 'useDetailPopup', but when I go hover events the basic arrow does not remain, the 'hand with finger' appears instead)

calendarDisplayField(
  viewType: "MONTH",
  showTitle: false,
  disabled: false,
  dateContext: index(local!splittedItem, 1, "") & "/01/" & index(local!splittedItem, 2, ""),
  detailDateFormat: "DD/MM/YYYY",
  eventsValue: local!events,
  options: {
    defaultView: "month",
    useFormPopup: false,
    useDetailPopup: false,
    isReadOnly: true,
    theme: {
      common: {
        backgroundColor: "#FFFFFF",
        border: "1px solid #e5e5e5",
        dayName: {
          color: "#000000"
        },
        holiday: {
          color: "#000000"
        },
        saturday: {
          color: "#000000"
        },
      },
      month: {
        dayExceptThisMonth: {
          color: "#d3d3d3"
        },
        holidayExceptThisMonth: {
          color: "#d3d3d3"
        }
      }
    },
    month: {
      visibleEventCount: 3,
      dayNames: {"sun", "mon", "tue", "wed", "thu", "fri", "sat"},
      startDayOfWeek: 1,
      isAlways6Weeks: false
    }
  }
)

Comment

marcore95 7 months ago

calendarDisplayField(
  viewType: "MONTH",
  showTitle: false,
  disabled: false,
  dateContext: index(local!splittedItem, 1, "") & "/01/" & index(local!splittedItem, 2, ""),
  detailDateFormat: "DD/MM/YYYY",
  eventsValue: local!events,
  options: {
    defaultView: "month",
    useFormPopup: false,
    useDetailPopup: false,
    isReadOnly: true,
    theme: {
      common: {
        backgroundColor: "#FFFFFF",
        border: "1px solid #e5e5e5",
        dayName: {
          color: "#000000"
        },
        holiday: {
          color: "#000000"
        },
        saturday: {
          color: "#000000"
        },
      },
      month: {
        dayExceptThisMonth: {
          color: "#d3d3d3"
        },
        holidayExceptThisMonth: {
          color: "#d3d3d3"
        }
      }
    },
    month: {
      visibleEventCount: 3,
      dayNames: {"sun", "mon", "tue", "wed", "thu", "fri", "sat"},
      startDayOfWeek: 1,
      isAlways6Weeks: false
    }
  }
)

Children

Justin Watts 7 months ago in reply to marcore95

I'm not aware of any configuration in the library that allows for overriding that functionaity.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel