カレンダーヘッダー

import { useCalendarApp, DayFlowCalendar, createMonthView } from '@dayflow/react';

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
  });

  return (
    <DayFlowCalendar
      calendar={calendar}
      calendarHeader={() => (
        <div className='custom-header'>
          <button onClick={() => calendar.goToPrevious()}>‹</button>
          <button onClick={() => calendar.goToToday()}>今日</button>
          <button onClick={() => calendar.goToNext()}>›</button>
        </div>
      )}
    />
  );
}

<template>
  <DayFlowCalendar :calendar="calendar">
    <template #calendarHeader="{ calendar }">
      <div class="custom-header">
        <button @click="calendar.goToPrevious()">‹</button>
        <button @click="calendar.goToToday()">今日</button>
        <button @click="calendar.goToNext()">›</button>
      </div>
    </template>
  </DayFlowCalendar>
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createMonthView } from '@dayflow/core';

const calendar = useCalendarApp({
  views: [createMonthView()],
});
</script>

import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createMonthView } from '@dayflow/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `
    <dayflow-calendar
      [calendar]="calendar"
      [calendarHeader]="customHeader"
    >
    </dayflow-calendar>

    <ng-template #customHeader let-args>
      <div class="custom-header">
        <button (click)="args.calendar.goToPrevious()">‹</button>
        <button (click)="args.calendar.goToToday()">今日</button>
        <button (click)="args.calendar.goToNext()">›</button>
      </div>
    </ng-template>
  `
})
export class AppComponent {
  calendar = {
    views: [createMonthView()],
  };
}

<!-- App.svelte -->
<script lang="ts">
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createMonthView } from '@dayflow/core';
  import CustomHeader from './CustomHeader.svelte';

  const calendar = useCalendarApp({
    views: [createMonthView()],
  });
</script>

<DayFlowCalendar {calendar} calendarHeader={CustomHeader} />

<!-- CustomHeader.svelte -->
<script lang="ts">
  import type { CalendarHeaderProps } from '@dayflow/core';
  let { calendar } = $props<CalendarHeaderProps>();
</script>

<div class="custom-header">
  <button onclick={() => calendar.goToPrevious()}>‹</button>
  <button onclick={() => calendar.goToToday()}>今日</button>
  <button onclick={() => calendar.goToNext()}>›</button>
</div>