nhn / tui.calendar

🍞📅A JavaScript calendar that has everything you need.
http://ui.toast.com/tui-calendar
MIT License
12.03k stars 1.3k forks source link

Question with popupDetailBody in month view #1290

Closed samuel-xiangpeng closed 2 years ago

samuel-xiangpeng commented 2 years ago

Version

v2.1.3

Test Environment

OS, chrome

Current Behavior

https://stackblitz.com/edit/react-xktdsp?file=src/App.js

import React from 'react';
import Calendar from '@toast-ui/react-calendar';

import '@toast-ui/calendar/dist/toastui-calendar.min.css';
import './style.css';

export default function App() {
  const events = [
    {
      id: 'test_event',
      calendarId: 'PROCESS',
      title: 'TEST EVENT',
      start: '2022-09-02T09:00:00',
      end: '2022-09-04T10:00:00',
      isVisible: true,
      isAllday: true,
    },
    {
      id: 'test_event_1',
      calendarId: 'CLOSED',
      title: 'TEST EVENT_1',
      start: '2022-09-22T09:00:00',
      end: '2022-09-23T10:00:00',
      isVisible: true,
      isAllday: true,
    },
    {
      id: 'test_event',
      calendarId: 'DONE',
      title: 'TEST EVENT',
      start: '2022-09-22T09:00:00',
      end: '2022-09-23T10:00:00',
      isVisible: true,
      isAllday: true,
    },
    {
      id: 'test_event',
      calendarId: 'DONE',
      title: 'TEST EVENT',
      start: '2022-09-22T09:00:00',
      end: '2022-09-23T10:00:00',
      isVisible: true,
      isAllday: true,
    },
    {
      id: 'test_event',
      calendarId: 'DONE',
      title: 'TEST EVENT',
      start: '2022-09-22T09:00:00',
      end: '2022-09-23T10:00:00',
      isVisible: true,
      isAllday: true,
    },
  ];
  return (
    <div>
      <Calendar
        height="100vh"
        view={'month'}
        useDetailPopup={true}
        events={events}
        tempalte={{
          popupDetailBody: function (schedule) {
            return `<div id="tui-do-calendar-detail">详情</div>`;
          },
        }}
      />
    </div>
  );
}

Expected Behavior

I want use popupDetailBody to customize render popup, i want to know how to use this api correctlly.

adhrinae commented 2 years ago

Duplicate of #1279.

  1. You misspelled the prop's name as tempalte, not template.
  2. Check out the discussion above for more information.
adhrinae commented 2 years ago

Closing since the question is answered.

samuel-xiangpeng commented 2 years ago

I have modified it but it still does not take effect. Can you help me see?

samuel-xiangpeng commented 2 years ago

image

samuel-xiangpeng commented 2 years ago

Thanks, I know how to do.