Closed2024/12/19にクローズ8

React + FullCalendarデモ

npm create vite@latest
✔ Project name: … fullcalendar-sample
✔ Select a framework: › React
✔ Select a variant: › JavaScript
cd fullcalendar-sample
npm install @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid
npm run dev

とりあえずdevserverが動くことまで確認。

src/App.jsx

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import './App.css'

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
    />
  )
}

スクリーンショット

イベントを表示する。ここでは日ごとにイベント数を表示する。

src/App.jsx

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import './App.css'

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
      events={[
        { title: '7', date: '2024-12-08', className: 'day-counts' },
        { title: '12', date: '2024-12-15', className: 'day-counts' },
        { title: '16', date: '2024-12-22', className: 'day-counts' },
      ]}
    />
  )
}

src/App.css

.day-counts {
  text-align: center;
  border-radius: 3em;
}

やりたいこと

背景
- 画像
- アニメーションで切り替える
- opacityの設定
セルの背景

カレンダーの背景を設定

src/App.css

.fc {
  background-image: url(./image.jpg);
  background-color: rgba(255, 255, 255, 0.7);
  background-blend-mode: lighten;
  background-size: contain;
}

背景のアニメーション

.fc {
  background-image: url(./image1.jpg), url(./image2.jpg), url(./image3.jpg);
  background-size: contain;
  background-color: rgba(255, 255, 255, 0.7);
  background-blend-mode: lighten;
  animation: image_anime 3s infinite;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

@keyframes image_anime {
  50% {
    background-image: url(./image2.jpg); 
  }
  100% {
    background-image: url(./image3.jpg); 
  }
}

画像をCellに表示

eventContent で画像のjsxを返す

src/App.jsx

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import './App.css'

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
      events={[
        { title: '7', date: '2024-12-08', className: 'day-counts', image: './image1.jpg' },
        { title: '12', date: '2024-12-15', className: 'day-counts', image: './image2.jpg' },
        { title: '16', date: '2024-12-22', className: 'day-counts', image: './image3.jpg' },
      ]}
      eventContent={(arg) => {
        const image = arg.event.extendedProps.image
        return (
          <>
            <img src={image} style={{width: '100%'}}/>
          </>
        )
      }}
    />
  )
}

.rc-h-event の background-color と border を打ち消す

src/App.css

.fc-h-event {
  background-color: unset;
  border: unset;
}
}

まとめ

セルや背景に画像を表示した、カスタマイズしたカレンダーの表示は可能
ただ、細かい調整を考えると自作した方がいいかもしれない

このスクラップは2024/12/19にクローズされました