Calendar

Calendar is a special API component in ElenixOS for displaying and selecting dates. This document will introduce the features, usage methods, and precautions of the calendar component.

Feature Introduction

The calendar component allows developers to create a calendar interface for displaying and selecting dates. Calendar components are typically used for date selection, schedule arrangements, and other scenarios.

Usage Methods

Create Calendar

Use the new lv.calendar() constructor to create a calendar object:

// Create calendar object
const calendar = new lv.calendar(eos.view.active());

Configure Calendar

Use the following methods to configure the calendar:

// Set calendar size
calendar.setSize(200, 200);

// Set calendar position
calendar.setPos(10, 10);

// Set current date
const date = { year: 2024, month: 1, day: 1 };
calendar.setDate(date);

// Set marked dates
const markedDates = [
    { year: 2024, month: 1, day: 5 },
    { year: 2024, month: 1, day: 10 },
    { year: 2024, month: 1, day: 15 }
];
calendar.setMarkedDates(markedDates);

Bind Events

Use the addEventCb method to bind events:

// Bind date selection event
calendar.addEventCb((e) => {
    const date = calendar.getDate();
    eos.console.log("Selected date:", date);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create a Simple Calendar

// Create calendar
const calendar = new lv.calendar(eos.view.active());
calendar.setSize(200, 200);
calendar.align(lv.ALIGN_CENTER, 0, 0);

// Set current date
const date = { year: 2024, month: 1, day: 1 };
calendar.setDate(date);

// Bind event
calendar.addEventCb((e) => {
    const date = calendar.getDate();
    eos.console.log("Selected date:", date);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create a Calendar with Marked Dates

// Create calendar
const calendar = new lv.calendar(eos.view.active());
calendar.setSize(200, 200);
calendar.align(lv.ALIGN_CENTER, 0, 0);

// Set current date
const date = { year: 2024, month: 1, day: 1 };
calendar.setDate(date);

// Set marked dates
const markedDates = [
    { year: 2024, month: 1, day: 5 },
    { year: 2024, month: 1, day: 10 },
    { year: 2024, month: 1, day: 15 }
];
calendar.setMarkedDates(markedDates);

// Bind event
calendar.addEventCb((e) => {
    const date = calendar.getDate();
    eos.console.log("Selected date:", date);
}, lv.EVENT_VALUE_CHANGED, null);