我正在使用完整的日历 APIapi在我的网站上显示一个受 promo.com 日历启发的日历,如下所示。
![enter image description here](https://i.stack.imgur.com/I0FCk.png)
这是我使用 React js 组件的解决方案
import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import calendartopbg from 'assets/images/calendar_bg.png';
import cloud from 'assets/images/calendar_chmurka.png';
import styled from 'styled-components';
const Calendar = () => {
const [calendar, setCalendar] = useState('');
const calendarRef = useRef('');
useEffect(() => {
if (calendarRef.current) {
console.log(FullCalendar);
setCalendar(new FullCalendar(calendarRef.current, {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear',
},
views: {
day: {
titleFormat: 'dddd, MMMM Do YYYY'
}
},
googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
events: 'en.usa#[email protected]',
eventClick: function(arg) {
// opens events in a popup window
window.open(arg.event.url, '_blank', 'width=700,height=600');
// prevents current tab from navigating
arg.jsEvent.preventDefault();
}
}));
}
}, [calendarRef.current]);
console.log(calendar);
return (
<>
<CalendarBackgroundWrapper>
<img style={imagestyle} src={calendartopbg} />
</CalendarBackgroundWrapper>
<CalendarContainer ref={calendarRef}>
{calendar && calendar.render ? calendar.render(): null}
</CalendarContainer>
</>
)
}
export default Calendar;
从上面的解决方案我有以下内容
![enter image description here](https://i.stack.imgur.com/e0ZoB.png)
现在我想显示日期,就像我上面提供的促销活动的日期一样
代替01
and 02
等等,应该是sun o1
, mon 02
, tue 03
etc
我如何使用完整的日历 API 来实现这一目标?