Cell Icons

The monthly calendar component can display icons in the day cells.

The following formats are supported:

• SVG symbol

• font icon (e.g., Font Awesome)

• standard images (JPEG, PNG, WEBP, SVG)

You can define a custom click action.

To prevent the click action from bubbling to the cell (and firing onTimeRangeSelected), set the action to "None".

Example

{
  onBeforeCellRender: args => {
      args.cell.properties.headerHtml = "";
      args.cell.properties.areas = [
          {
              left: 0,
              top: 0,
              right: 0,
              bottom: 0,
              text: args.cell.start.toString("d"),
              style: "font-size: 26px; display: flex; justify-content: center; align-items: center;",
              fontColor: "#e0e0e0"
          }
      ];

      if (args.cell.start.getDay() < 15 && args.cell.start.getMonth() === DayPilot.Date.today().getMonth()) {
          args.cell.properties.areas.push({
              right: 2,
              top: 2,
              width: 20,
              height: 20,
              symbol: "../icons/daypilot.svg#padlock",
              fontColor: "#ff8c00",
              style: "cursor: pointer;",
              action: "None",
              onClick: args => {
                  const cell = args.source;
                  DayPilot.Modal.alert("Cell clicked: " + cell.start);
                  console.log("args", args);
              },
          });
      }
  }
}