Basic Calendar Usage

A simple example of creating a calendar component with basic functionality.

Code Example

Copy
1import { createCalendarController } from '@uplink-protocol/calendar-controller';
2
3// Create a new calendar controller instance
4const calendar = createCalendarController({
5  // Initial date to display
6  initialDate: new Date(),
7  
8  // First day of week (0 = Sunday, 1 = Monday, etc.)
9  firstDayOfWeek: 0,
10  
11  // Event handlers
12  onDateSelect: (date) => {
13    console.log('Selected date:', date);
14  }
15});
16
17// Get the current month view
18const currentMonth = calendar.getMonthView();
19
20// Generate the calendar UI
21function renderCalendar() {
22  return (
23    <div className="calendar">
24      <div className="calendar-header">
25        <button onClick={() => calendar.prevMonth()}>Previous</button>
26        <h2>{calendar.getFormattedMonth()}</h2>
27        <button onClick={() => calendar.nextMonth()}>Next</button>
28      </div>
29      
30      <div className="calendar-grid">
31        {/* Render weekday headers */}
32        {calendar.getWeekdayLabels().map(day => (
33          <div key={day} className="calendar-day-header">
34            {day}
35          </div>
36        ))}
37        
38        {/* Render calendar days */}
39        {currentMonth.days.map(day => (
40          <div 
41            key={day.date.toString()}
42            className={`calendar-day ${day.isCurrentMonth ? 'current-month' : 'other-month'} 
43                      ${day.isToday ? 'today' : ''} 
44                      ${day.isSelected ? 'selected' : ''}`}
45            onClick={() => calendar.selectDate(day.date)}
46          >
47            {day.dayOfMonth}
48          </div>
49        ))}
50      </div>
51    </div>
52  );
53}