• Add a custom button to the right side of the calendar (When in full view). The button will be added below the Note Search button.

    Example

    // Function to call to populate the side panel
    function populateSidePanel(event, element){
    if(element){
    const header = document.createElement('h2');
    header.innerText = "My Custom Button";
    element.append(header);
    }
    }

    // Function to call when the button is clicked
    function sidePanelButtonClick(event, element){
    if(event){
    const dialog = new Dialog({
    title: "My Module",
    content: "You clicked the button!",
    buttons:{
    awesome: {
    icon: '<i class="fa-solid fa-face-smile"></i>',
    label: "Awesome!"
    }
    },
    default: "awesome"
    });
    dialog.render(true);
    }
    }


    // Adding a button that should show a side panel
    // Clicking the button will show a side panel that will have the title "My Custom Button"
    SimpleCalendar.api.addSidebarButton("My Module", "fa-computer-mouse", "my-custom-class", true, populateSidePanel);

    // Adding a button that will show a dialog when clicked
    SimpleCalendar.api.addSidebarButton("My Module", "fa-computer-mouse", "my-custom-class", false, sidePanelButtonClick);

    Parameters

    • buttonTitle: string

      The text that appears when the button is hovered over.

    • iconClass: string

      The Font Awesome Free icon class to use for the buttons display.

    • customClass: string

      A custom CSS class to add to the button.

    • showSidePanel: boolean

      If the button should open a side panel or not. A side panel functions like the notes list but will be completely empty.

    • onRender: ((event: null | Event, renderTarget: undefined | null | HTMLElement) => void)

      Function that is called to show information to users.

      If the showSidePanel parameter is true this function will be passed an HTMLElement representing the side panel. The element could potentially be null so code should account for that. This function is then responsible for populating the side panel with any information. This function is called everytime the calendar is rendered.

      If the showSidePanel parameter is false this function will be passed an Event for the click. The event could potentially be null so code should account for that. This function should then open up an application or dialog or perform an action for the user. This function is called everytime the button is clicked.

        • (event: null | Event, renderTarget: undefined | null | HTMLElement): void
        • Parameters

          • event: null | Event
          • renderTarget: undefined | null | HTMLElement

          Returns void

    Returns any