桃城网站建设价格,sem和网站建设的关系,芜湖市网站建设公司,广渠门做网站的公司使用步骤请参考#xff1a;react使用Fullcalendar
卡片式的日历#xff1a;
需求图#xff1a; 卡片式的日历#xff0c;其实我是推荐 antd的#xff0c;我两个都写了一下都能实现。
antd 的代码#xff1a;
antd的我直接用的官网示例#xff1a;antd 日历示例
i…使用步骤请参考react使用Fullcalendar
卡片式的日历
需求图 卡片式的日历其实我是推荐 antd的我两个都写了一下都能实现。
antd 的代码
antd的我直接用的官网示例antd 日历示例
import React, { useEffect, useState, useRef } from react;
import { Calendar, Col, Radio, Row, Select, Typography } from antd;
import ./index.less
import moment from moment;
const ProductFullcalendar () {const [currentDate, setCurrentDate] useState(moment()); //当前日期const onPanelChange (value, mode) {console.log(value.format(YYYY-MM-DD), mode);};return (div classNamevv产品日历Calendarfullscreen{false}onPanelChange{onPanelChange}dateFullCellRender{(current) {let currentDate1 moment(current).format(YYYY-MM-DD);let selectDate currentDate.format(YYYY-MM-DD);if (currentDate1 selectDate) {return div classNamedateCell selecteddiv classNamedate_select{moment(current).format(DD)}/divdiv classNameevent_select/div/div} else {return div classNamedateCelldiv classNamedate{moment(current).format(DD)}/div/div}}}onSelect{(date) {setCurrentDate(date);}}//div)
};
export default ProductFullcalendar;
less:
.vv {.ant-picker-cell {color: rgba(0, 0, 0, 0.3);}.ant-picker-cell-in-view {color: rgba(0, 0, 0, 0.87);}.selected {background: #3D57B1;box-shadow: 0px 2px 6px 0px rgba(33, 77, 208, 0.36);border-radius: 8px;.date_select {font-family: Avenir, Avenir;font-weight: 500;font-size: 20px;color: #FFFFFF;}.event_select{width: 6px;height: 6px;background: #FFFFFF;border-radius: 50%;}}.dateCell {width: 48px;height: 55px;border-radius: 8px;margin: 0 auto;display: flex;align-items: center;justify-content: center;flex-direction: column;.date {font-family: Avenir, Avenir;font-weight: 500;font-size: 20px;}.event{width: 6px;height: 6px;background: red;border-radius: 50%;}}
}fullcalendar/react的代码:
它需要处理的东西很多点击上个月的日期时需要自己跳到上一个月。
import React, { useEffect, useState, useRef } from react;
import FullCalendar from fullcalendar/react
import dayGridPlugin from fullcalendar/daygrid
import interactionPlugin from fullcalendar/interaction
import ./index.less
const ProductFullcalendar () {const [currentDate, setCurrentDate] useState(); //当前日期// 创建一个 ref 来存储 FullCalendar 的实例 const calendarRef useRef(null);const renderEventContent (eventInfo) {return div classNamekk/div}const events [{ title: , start: new Date(2024, 10, 1) }]const dayCellContent (data) {console.log(data, currentDate, 908777);let dayDate data.dayNumberText.replace(日, );let isToday data.isToday;//是不是当月的日期let isOther data.isOther;return div classNamedayCellContentdiv className{dayDate}{dayDate}/div/div}return (div classNamevv产品日历FullCalendarref{calendarRef}plugins{[dayGridPlugin, interactionPlugin]}initialViewdayGridMonthevents{events}eventContent{renderEventContent}dayCellClassNames{dayCell}localezh-cn// 设置语言selectable{true}dateClick{(info) {document.querySelectorAll(.fc-day.selected).forEach(function (el) {el.classList.remove(selected);});const clickedDate info.date;//console.log(calendarRef.current.getApi()?.getDate(),calendarRef,987)const currentViewDate calendarRef?.current?.getApi()?.getDate(); // 获取当前视图的日期// 判断是否为同一月份if (clickedDate.getMonth() ! currentViewDate.getMonth() ||clickedDate.getFullYear() ! currentViewDate.getFullYear()) {// 如果不是当月日期则切换到点击的月份calendarRef?.current?.getApi()?.gotoDate(clickedDate);}// calendarRef?.current?.getApi()?.refetchEvents(); // 刷新事件setTimeout(() {info.dayEl.classList.add(selected);})}}dayHeaderClassNames{dayHeader}dayHeaderContent{(arg) {// 自定义星期内容const days [日, 一, 二, 三, 四, 五, 六]; // 星期的中文表示return days[arg.date.getDay()]; // 获取对应星期的中文名称}}dayCellContent{(data) {return dayCellContent;}}//div)
};
export default ProductFullcalendar;less代码:
.vv {--fc-border-color: none;--fc-highlight-color: none;--fc-today-bg-color: none;//日历总高度 包括 toolBar 和日历内容--fc-daygrid-height: 390px;// 单元格内容宽度 我自定义的// 单元格内容宽度 我自定义的--fc-daygrid-day-frame-width: 48px;// 单元格内容高度 我自定义的--fc-daygrid-day-frame-height: 55px;.fc-media-screen {height: var(--fc-daygrid-height);}.fc-header-toolbar {margin-bottom: 12px;}a {color: initial;}.fc-daygrid-day-events {min-height: 0 !important;}.dayCell {--fc-border-color: none;width: var(--fc-daygrid-day-frame-width);.fc-daygrid-day-frame {width: var(--fc-daygrid-day-frame-width);height: var(--fc-daygrid-day-frame-height);border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin: 0 auto;}}.fc-theme-standard th {border-bottom: 1px solid #F0F0F0;}}.dayHeader {font-weight: 400;font-size: 14px;color: rgba(0, 0, 0, 0.54) !important;width: var(--fc-daygrid-day-frame-width);
}.kk {width: 6px;height: 6px;background: #FF7D7D;border-radius: 50%;
}.fc-day-other {color: rgba(0, 0, 0, 0.3);
}.fc-daygrid-day {color: rgba(0, 0, 0, 0.87);
}.dayCellContent {display: flex;align-items: center;justify-content: center;flex-direction: column;line-height: 20px;.dayDate {font-family: Avenir, Avenir;font-weight: 800;font-size: 20px;}.dayEvent {margin-top: 2px;.dayEventItem {width: 6px;height: 6px;background: #4982F3;border-radius: 50%;}}}.selected {width: var(--fc-daygrid-day-frame-width);.fc-daygrid-day-frame {width: var(--fc-daygrid-day-frame-width);height: var(--fc-daygrid-day-frame-height);border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin: 0 auto;background: #3D57B1;box-shadow: 0px 2px 6px 0px rgba(33, 77, 208, 0.36);.fc-daygrid-day-events {.kk {width: 6px;height: 6px;background: #FFFFFF;border-radius: 50%;}}.dayCellContent {display: flex;align-items: center;justify-content: center;flex-direction: column;.dayDate {font-family: Avenir, Avenir;font-weight: 800;font-size: 20px;color: #FFFFFF;}.dayEvent {margin-top: 2px;}}}
}antd官网代码
import { Calendar, Col, Radio, Row, Select, Typography } from antd;
import React from react;
const App () {const onPanelChange (value, mode) {console.log(value.format(YYYY-MM-DD), mode);};return (div classNamesite-calendar-customize-header-wrapperCalendarfullscreen{false}headerRender{({ value, type, onChange, onTypeChange }) {const start 0;const end 12;const monthOptions [];const current value.clone();const localeData value.localeData();const months [];for (let i 0; i 12; i) {current.month(i);months.push(localeData.monthsShort(current));}for (let i start; i end; i) {monthOptions.push(Select.Option key{i} value{i} classNamemonth-item{months[i]}/Select.Option,);}const year value.year();const month value.month();const options [];for (let i year - 10; i year 10; i 1) {options.push(Select.Option key{i} value{i} classNameyear-item{i}/Select.Option,);}return (divstyle{{padding: 8,}}Typography.Title level{4}Custom header/Typography.TitleRow gutter{8}ColRadio.GroupsizesmallonChange{(e) onTypeChange(e.target.value)}value{type}Radio.Button valuemonthMonth/Radio.ButtonRadio.Button valueyearYear/Radio.Button/Radio.Group/ColColSelectsizesmalldropdownMatchSelectWidth{false}classNamemy-year-selectvalue{year}onChange{(newYear) {const now value.clone().year(newYear);onChange(now);}}{options}/Select/ColColSelectsizesmalldropdownMatchSelectWidth{false}value{month}onChange{(newMonth) {const now value.clone().month(newMonth);onChange(now);}}{monthOptions}/Select/Col/Row/div);}}onPanelChange{onPanelChange}//div);
};
export default App;正常日历 antd 和 Fullcalendar 都行
我的需求是 