feat: add calendar block
This commit is contained in:
parent
b6f359bbc5
commit
4139fc8cf6
packages/client/src/schemas/calendar
24
packages/client/src/schemas/calendar/demos/demo1.tsx
Normal file
24
packages/client/src/schemas/calendar/demos/demo1.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '../../';
|
||||
import { Calendar } from '..';
|
||||
import events from './events';
|
||||
|
||||
const schema: ISchema = {
|
||||
type: 'array',
|
||||
name: 'calendar1',
|
||||
'x-component': 'Calendar',
|
||||
default: events,
|
||||
properties: {
|
||||
event: {
|
||||
type: 'void',
|
||||
'x-component': 'Calendar.Event',
|
||||
properties: {
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return <SchemaRenderer components={{ Calendar }} schema={schema} />;
|
||||
};
|
180
packages/client/src/schemas/calendar/demos/events.ts
Normal file
180
packages/client/src/schemas/calendar/demos/events.ts
Normal file
@ -0,0 +1,180 @@
|
||||
const now = new Date()
|
||||
|
||||
export default [
|
||||
{
|
||||
id: 0,
|
||||
title: 'All Day Event very long title',
|
||||
allDay: true,
|
||||
start: new Date(2015, 3, 0),
|
||||
end: new Date(2015, 3, 1),
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Long Event',
|
||||
start: new Date(2015, 3, 7),
|
||||
end: new Date(2015, 3, 10),
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
title: 'DTS STARTS',
|
||||
start: new Date(2016, 2, 13, 0, 0, 0),
|
||||
end: new Date(2016, 2, 20, 0, 0, 0),
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
title: 'DTS ENDS',
|
||||
start: new Date(2016, 10, 6, 0, 0, 0),
|
||||
end: new Date(2016, 10, 13, 0, 0, 0),
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
title: 'Some Event',
|
||||
start: new Date(2015, 3, 9, 0, 0, 0),
|
||||
end: new Date(2015, 3, 10, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Conference',
|
||||
start: new Date(2015, 3, 11),
|
||||
end: new Date(2015, 3, 13),
|
||||
desc: 'Big conference for important people',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Meeting',
|
||||
start: new Date(2015, 3, 12, 10, 30, 0, 0),
|
||||
end: new Date(2015, 3, 12, 12, 30, 0, 0),
|
||||
desc: 'Pre-meeting meeting, to prepare for the meeting',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Lunch',
|
||||
start: new Date(2015, 3, 12, 12, 0, 0, 0),
|
||||
end: new Date(2015, 3, 12, 13, 0, 0, 0),
|
||||
desc: 'Power lunch',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Meeting',
|
||||
start: new Date(2015, 3, 12, 14, 0, 0, 0),
|
||||
end: new Date(2015, 3, 12, 15, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Happy Hour',
|
||||
start: new Date(2015, 3, 12, 17, 0, 0, 0),
|
||||
end: new Date(2015, 3, 12, 17, 30, 0, 0),
|
||||
desc: 'Most important meal of the day',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Dinner',
|
||||
start: new Date(2015, 3, 12, 20, 0, 0, 0),
|
||||
end: new Date(2015, 3, 12, 21, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Planning Meeting with Paige',
|
||||
start: new Date(2015, 3, 13, 8, 0, 0),
|
||||
end: new Date(2015, 3, 13, 10, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 11.1,
|
||||
title: 'Inconvenient Conference Call',
|
||||
start: new Date(2015, 3, 13, 9, 30, 0),
|
||||
end: new Date(2015, 3, 13, 12, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 11.2,
|
||||
title: "Project Kickoff - Lou's Shoes",
|
||||
start: new Date(2015, 3, 13, 11, 30, 0),
|
||||
end: new Date(2015, 3, 13, 14, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 11.3,
|
||||
title: 'Quote Follow-up - Tea by Tina',
|
||||
start: new Date(2015, 3, 13, 15, 30, 0),
|
||||
end: new Date(2015, 3, 13, 16, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Late Night Event',
|
||||
start: new Date(2015, 3, 17, 19, 30, 0),
|
||||
end: new Date(2015, 3, 18, 2, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 12.5,
|
||||
title: 'Late Same Night Event',
|
||||
start: new Date(2015, 3, 17, 19, 30, 0),
|
||||
end: new Date(2015, 3, 17, 23, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Multi-day Event',
|
||||
start: new Date(2015, 3, 20, 19, 30, 0),
|
||||
end: new Date(2015, 3, 22, 2, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Today',
|
||||
start: new Date(new Date().setHours(new Date().getHours() - 3)),
|
||||
end: new Date(new Date().setHours(new Date().getHours() + 3)),
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Point in Time Event',
|
||||
start: now,
|
||||
end: now,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Video Record',
|
||||
start: new Date(2015, 3, 14, 15, 30, 0),
|
||||
end: new Date(2015, 3, 14, 19, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Dutch Song Producing',
|
||||
start: new Date(2015, 3, 14, 16, 30, 0),
|
||||
end: new Date(2015, 3, 14, 20, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Itaewon Halloween Meeting',
|
||||
start: new Date(2015, 3, 14, 16, 30, 0),
|
||||
end: new Date(2015, 3, 14, 17, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: 'Online Coding Test',
|
||||
start: new Date(2015, 3, 14, 17, 30, 0),
|
||||
end: new Date(2015, 3, 14, 20, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: 'An overlapped Event',
|
||||
start: new Date(2015, 3, 14, 17, 0, 0),
|
||||
end: new Date(2015, 3, 14, 18, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: 'Phone Interview',
|
||||
start: new Date(2015, 3, 14, 17, 0, 0),
|
||||
end: new Date(2015, 3, 14, 18, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: 'Cooking Class',
|
||||
start: new Date(2015, 3, 14, 17, 30, 0),
|
||||
end: new Date(2015, 3, 14, 19, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: 'Go to the gym',
|
||||
start: new Date(2015, 3, 14, 18, 30, 0),
|
||||
end: new Date(2015, 3, 14, 20, 0, 0),
|
||||
},
|
||||
]
|
26
packages/client/src/schemas/calendar/index.md
Normal file
26
packages/client/src/schemas/calendar/index.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Calendar - 日历
|
||||
nav:
|
||||
title: 组件
|
||||
path: /client
|
||||
group:
|
||||
order: 1
|
||||
title: Schemas
|
||||
path: /client/schemas
|
||||
---
|
||||
|
||||
# Calendar - 日历
|
||||
|
||||
## Node Tree
|
||||
|
||||
<pre lang="tsx">
|
||||
<Calendar>
|
||||
<Calendar.Event>
|
||||
// 查看日历事件详情
|
||||
</Calendar.Event>
|
||||
</Calendar>
|
||||
</pre>
|
||||
|
||||
## Examples
|
||||
|
||||
<code src="./demos/demo1.tsx" />
|
132
packages/client/src/schemas/calendar/index.tsx
Normal file
132
packages/client/src/schemas/calendar/index.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Calendar as BigCalendar,
|
||||
Views,
|
||||
momentLocalizer,
|
||||
} from 'react-big-calendar';
|
||||
import moment from 'moment';
|
||||
import * as dates from 'react-big-calendar/lib/utils/dates';
|
||||
import { navigate } from 'react-big-calendar/lib/utils/constants';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import { Space, Button, Radio, Select } from 'antd';
|
||||
import './style2.less';
|
||||
import { observer, useField } from '@formily/react';
|
||||
|
||||
const localizer = momentLocalizer(moment);
|
||||
|
||||
moment.locale('zh-CN');
|
||||
|
||||
const allViews = Object.keys(Views).map((k) => Views[k]);
|
||||
|
||||
interface ToolbarProps {
|
||||
localizer?: any;
|
||||
label?: any;
|
||||
view?: any;
|
||||
views?: any;
|
||||
onNavigate?: (action: string) => void;
|
||||
onView?: (view: string) => void;
|
||||
}
|
||||
|
||||
function Toolbar(props: ToolbarProps) {
|
||||
const {
|
||||
label,
|
||||
views,
|
||||
view,
|
||||
onNavigate,
|
||||
onView,
|
||||
localizer: { messages },
|
||||
} = props;
|
||||
return (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<Space>
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate(navigate.TODAY);
|
||||
}}
|
||||
>
|
||||
今天
|
||||
</Button>
|
||||
<div className="ant-btn-group">
|
||||
<Button
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => onNavigate(navigate.PREVIOUS)}
|
||||
></Button>
|
||||
<Button
|
||||
icon={<RightOutlined />}
|
||||
onClick={() => onNavigate(navigate.NEXT)}
|
||||
></Button>
|
||||
</div>
|
||||
<div style={{ fontSize: '1.75em', fontWeight: 300 }}>{label}</div>
|
||||
</Space>
|
||||
<Space style={{ float: 'right' }}>
|
||||
<Select value={view} onChange={onView}>
|
||||
{views.map((name) => (
|
||||
<Select.Option value={name}>{messages[name]}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
<Button>筛选</Button>
|
||||
<Button type={'primary'}>新增</Button>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const Calendar = observer((props: any) => {
|
||||
const field = useField<Formily.Core.Models.ArrayField>();
|
||||
return (
|
||||
<div style={{ height: 700 }}>
|
||||
<BigCalendar
|
||||
popup
|
||||
selectable
|
||||
events={field.value || []}
|
||||
views={allViews}
|
||||
step={60}
|
||||
showMultiDayTimes
|
||||
messages={{
|
||||
allDay: '',
|
||||
previous: (
|
||||
<div>
|
||||
<LeftOutlined />
|
||||
</div>
|
||||
),
|
||||
next: (
|
||||
<div>
|
||||
<RightOutlined />
|
||||
</div>
|
||||
),
|
||||
today: '今天',
|
||||
month: '月',
|
||||
week: '周',
|
||||
work_week: '工作日',
|
||||
day: '天',
|
||||
agenda: '列表',
|
||||
date: '日期',
|
||||
time: '时间',
|
||||
event: '事件',
|
||||
noEventsInRange: '无',
|
||||
showMore: (count) => `还有 ${count} 项`,
|
||||
}}
|
||||
formats={{
|
||||
monthHeaderFormat: 'Y年M月',
|
||||
agendaDateFormat: 'M月DD日',
|
||||
dayHeaderFormat: 'Y年M月DD日',
|
||||
dayRangeHeaderFormat: ({ start, end }, culture, local) => {
|
||||
if (dates.eq(start, end, 'month')) {
|
||||
return local.format(start, 'Y年M月', culture);
|
||||
}
|
||||
return `${local.format(start, 'Y年M月', culture)} - ${local.format(
|
||||
end,
|
||||
'Y年M月',
|
||||
culture,
|
||||
)}`;
|
||||
},
|
||||
}}
|
||||
defaultDate={new Date(2015, 3, 1)}
|
||||
components={{
|
||||
toolbar: Toolbar,
|
||||
}}
|
||||
localizer={localizer}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
672
packages/client/src/schemas/calendar/style.less
Normal file
672
packages/client/src/schemas/calendar/style.less
Normal file
@ -0,0 +1,672 @@
|
||||
.rbc-btn {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.rbc-btn {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled].rbc-btn {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.rbc-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rbc-calendar {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.rbc-calendar *,
|
||||
.rbc-calendar *:before,
|
||||
.rbc-calendar *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.rbc-abs-full,
|
||||
.rbc-row-bg {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.rbc-ellipsis,
|
||||
.rbc-event-label,
|
||||
.rbc-row-segment .rbc-event-content,
|
||||
.rbc-show-more {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.rbc-off-range {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.rbc-off-range-bg {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.rbc-header {
|
||||
overflow: hidden;
|
||||
flex: 1 0 0%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 3px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
font-size: 90%;
|
||||
min-height: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.rbc-header + .rbc-header {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-header + .rbc-header {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.rbc-header > a,
|
||||
.rbc-header > a:active,
|
||||
.rbc-header > a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rbc-row-content {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rbc-row-content-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
.rbc-row-content-scrollable
|
||||
.rbc-row-content-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-today {
|
||||
background-color: #eaf6ff;
|
||||
}
|
||||
|
||||
.rbc-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.rbc-toolbar .rbc-toolbar-label {
|
||||
flex-grow: 1;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.rbc-toolbar button {
|
||||
color: #373a3c;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
background-image: none;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0.375rem 1rem;
|
||||
border-radius: 4px;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-toolbar button:active,
|
||||
.rbc-toolbar button.rbc-active {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
.rbc-toolbar button:active:hover,
|
||||
.rbc-toolbar button:active:focus,
|
||||
.rbc-toolbar button.rbc-active:hover,
|
||||
.rbc-toolbar button.rbc-active:focus {
|
||||
color: #373a3c;
|
||||
background-color: #d4d4d4;
|
||||
border-color: #8c8c8c;
|
||||
}
|
||||
.rbc-toolbar button:focus {
|
||||
color: #373a3c;
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
.rbc-toolbar button:hover {
|
||||
color: #373a3c;
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
|
||||
.rbc-btn-group {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-btn-group > button:first-child:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.rbc-btn-group > button:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.rbc-btn-group > button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.rbc-btn-group button + button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group button + button {
|
||||
margin-left: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.rbc-btn-group + .rbc-btn-group,
|
||||
.rbc-btn-group + button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.rbc-event,
|
||||
.rbc-day-slot .rbc-background-event {
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
background-color: #3174ad;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.rbc-slot-selecting .rbc-event,
|
||||
.rbc-slot-selecting .rbc-day-slot .rbc-background-event,
|
||||
.rbc-day-slot .rbc-slot-selecting .rbc-background-event {
|
||||
cursor: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.rbc-event.rbc-selected,
|
||||
.rbc-day-slot .rbc-selected.rbc-background-event {
|
||||
background-color: #265985;
|
||||
}
|
||||
.rbc-event:focus,
|
||||
.rbc-day-slot .rbc-background-event:focus {
|
||||
outline: 5px auto #3b99fc;
|
||||
}
|
||||
|
||||
.rbc-event-label {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.rbc-event-overlaps {
|
||||
box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
.rbc-event-continues-prior {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-after {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-earlier {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-later {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-row-segment {
|
||||
padding: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.rbc-selected-cell {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rbc-show-more {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
z-index: 4;
|
||||
font-weight: bold;
|
||||
font-size: 85%;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.rbc-month-view {
|
||||
position: relative;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rbc-month-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-month-row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
flex-basis: 0px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.rbc-month-row + .rbc-month-row {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rbc-date-cell {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.rbc-date-cell.rbc-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
.rbc-date-cell > a,
|
||||
.rbc-date-cell > a:active,
|
||||
.rbc-date-cell > a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rbc-row-bg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-day-bg {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
.rbc-day-bg + .rbc-day-bg {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rbc-overlay {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
border: 1px solid #e5e5e5;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
|
||||
padding: 10px;
|
||||
}
|
||||
.rbc-overlay > * + * {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.rbc-overlay-header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin: -10px -10px 5px -10px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.rbc-agenda-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
|
||||
padding: 5px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
|
||||
padding: 3px 5px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rbc-agenda-time-cell {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.rbc-agenda-time-cell .rbc-continues-after:after {
|
||||
content: ' »';
|
||||
}
|
||||
.rbc-agenda-time-cell .rbc-continues-prior:before {
|
||||
content: '« ';
|
||||
}
|
||||
|
||||
.rbc-agenda-date-cell,
|
||||
.rbc-agenda-time-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-agenda-event-cell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rbc-time-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
.rbc-time-column .rbc-timeslot-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rbc-timeslot-group {
|
||||
border-bottom: 1px solid #ddd;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.rbc-time-gutter,
|
||||
.rbc-header-gutter {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.rbc-label {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.rbc-day-slot {
|
||||
position: relative;
|
||||
}
|
||||
.rbc-day-slot .rbc-events-container {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.rbc-day-slot .rbc-events-container.rbc-rtl {
|
||||
left: 10px;
|
||||
right: 0;
|
||||
}
|
||||
.rbc-day-slot .rbc-event,
|
||||
.rbc-day-slot .rbc-background-event {
|
||||
border: 1px solid #265985;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
min-height: 20px;
|
||||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.rbc-day-slot .rbc-background-event {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.rbc-day-slot .rbc-event-label {
|
||||
flex: none;
|
||||
padding-right: 5px;
|
||||
width: auto;
|
||||
}
|
||||
.rbc-day-slot .rbc-event-content {
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
word-wrap: break-word;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
min-height: 1em;
|
||||
}
|
||||
.rbc-day-slot .rbc-time-slot {
|
||||
border-top: 1px solid #f7f7f7;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-gutter,
|
||||
.rbc-time-view-resources .rbc-time-header-gutter {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
border-right: 1px solid #ddd;
|
||||
z-index: 10;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header-content {
|
||||
min-width: auto;
|
||||
flex: 1 0 0;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header-cell-single-day {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-day-slot {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-header,
|
||||
.rbc-time-view-resources .rbc-day-bg {
|
||||
width: 140px;
|
||||
flex: 1 1 0;
|
||||
flex-basis: 0 px;
|
||||
}
|
||||
|
||||
.rbc-time-header-content + .rbc-time-header-content {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.rbc-time-slot {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.rbc-time-slot.rbc-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rbc-day-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rbc-slot-selection {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
font-size: 75%;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.rbc-slot-selecting {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.rbc-time-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
min-height: 0;
|
||||
}
|
||||
.rbc-time-view .rbc-time-gutter {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-cell {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-events {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
.rbc-time-view .rbc-row {
|
||||
box-sizing: border-box;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.rbc-time-header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
.rbc-time-header.rbc-overflowing {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-time-header.rbc-overflowing {
|
||||
border-right-width: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-time-header > .rbc-row:first-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.rbc-time-header > .rbc-row.rbc-row-resource {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rbc-time-header-cell-single-day {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-time-header-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-time-header-content {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.rbc-time-header-content > .rbc-row.rbc-row-resource {
|
||||
border-bottom: 1px solid #ddd;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rbc-time-content {
|
||||
display: flex;
|
||||
flex: 1 0 0%;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border-top: 2px solid #ddd;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
.rbc-time-content > .rbc-time-gutter {
|
||||
flex: none;
|
||||
}
|
||||
.rbc-time-content > * + * > * {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.rbc-rtl .rbc-time-content > * + * > * {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.rbc-time-content > .rbc-day-slot {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.rbc-current-time-indicator {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: #74ad31;
|
||||
pointer-events: none;
|
||||
}
|
769
packages/client/src/schemas/calendar/style2.less
Normal file
769
packages/client/src/schemas/calendar/style2.less
Normal file
@ -0,0 +1,769 @@
|
||||
@charset "UTF-8";
|
||||
.rbc-btn {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.rbc-btn {
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled].rbc-btn {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.rbc-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rbc-calendar {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rbc-calendar *,
|
||||
.rbc-calendar *:before,
|
||||
.rbc-calendar *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.rbc-abs-full,
|
||||
.rbc-row-bg {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.rbc-ellipsis,
|
||||
.rbc-event-label,
|
||||
.rbc-row-segment .rbc-event-content,
|
||||
.rbc-show-more {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.rbc-off-range {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.rbc-off-range-bg {
|
||||
// background: #e6e6e6;
|
||||
}
|
||||
|
||||
.rbc-header {
|
||||
// font-size: 16px;
|
||||
overflow: hidden;
|
||||
flex: 1 0 0%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 4px 12px;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
// font-weight: 500;
|
||||
min-height: 32px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin: 0 4px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
.rbc-header + .rbc-header {
|
||||
// border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-header + .rbc-header {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-header > a,
|
||||
.rbc-header > a:active,
|
||||
.rbc-header > a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rbc-row-content {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rbc-row-content-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
.rbc-row-content-scrollable
|
||||
.rbc-row-content-scroll-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.rbc-toolbar .rbc-toolbar-label {
|
||||
flex-grow: 1;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.rbc-toolbar button {
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
height: 32px;
|
||||
color: #373a3c;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 4px 15px;
|
||||
border-radius: 2px;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-toolbar button:active,
|
||||
.rbc-toolbar button.rbc-active {
|
||||
// background-image: none;
|
||||
// box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
// background-color: #e6e6e6;
|
||||
z-index: 2;
|
||||
color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
.rbc-toolbar button:active:hover,
|
||||
.rbc-toolbar button:active:focus,
|
||||
.rbc-toolbar button.rbc-active:hover,
|
||||
.rbc-toolbar button.rbc-active:focus {
|
||||
// color: #373a3c;
|
||||
// background-color: #d4d4d4;
|
||||
// border-color: #8c8c8c;
|
||||
z-index: 2;
|
||||
color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
// .rbc-toolbar button:focus {
|
||||
// color: #373a3c;
|
||||
// background-color: #e6e6e6;
|
||||
// border-color: #adadad; }
|
||||
.rbc-toolbar button:hover {
|
||||
// color: #373a3c;
|
||||
// background-color: #e6e6e6;
|
||||
z-index: 2;
|
||||
color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.rbc-btn-group {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-btn-group > button:first-child:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.rbc-btn-group > button:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.rbc-btn-group > button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.rbc-btn-group button + button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.rbc-rtl .rbc-btn-group button + button {
|
||||
margin-left: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.rbc-btn-group + .rbc-btn-group,
|
||||
.rbc-btn-group + button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.rbc-event {
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
background-color: rgba(240, 240, 240, .65);
|
||||
border-radius: 2px;
|
||||
// color: #1890ff;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
&:hover {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.rbc-slot-selecting .rbc-event {
|
||||
cursor: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.rbc-event.rbc-selected {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
.rbc-event:focus {
|
||||
// outline: 5px auto #3b99fc;
|
||||
}
|
||||
|
||||
.rbc-event-label {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.rbc-event-overlaps {
|
||||
box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
.rbc-event-continues-prior {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-after {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-earlier {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-event-continues-later {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.rbc-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-row-segment {
|
||||
padding: 0 4px 1px 4px;
|
||||
}
|
||||
|
||||
.rbc-selected-cell {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rbc-show-more {
|
||||
z-index: 4;
|
||||
font-weight: bold;
|
||||
font-size: 85%;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
color: inherit;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.rbc-month-view {
|
||||
position: relative;
|
||||
// border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
height: 68vh;
|
||||
}
|
||||
|
||||
.rbc-month-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rbc-month-row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
flex-basis: 0px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.rbc-month-row + .rbc-month-row {
|
||||
// border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.rbc-date-cell {
|
||||
// cursor: pointer;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
.rbc-date-cell.rbc-now a {
|
||||
// font-weight: bold;
|
||||
color: #1890ff;
|
||||
}
|
||||
.rbc-date-cell > a,
|
||||
.rbc-date-cell > a:active,
|
||||
.rbc-date-cell > a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.rbc-date-cell > a:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.rbc-row-bg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-day-bg {
|
||||
flex: 1 0 0%;
|
||||
// border-top: 2px solid #f0f0f0;
|
||||
margin: 0 4px;
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
// cursor: pointer;
|
||||
}
|
||||
|
||||
.rbc-month-view {
|
||||
.rbc-day-bg {
|
||||
border-top: 2px solid #f0f0f0;
|
||||
}
|
||||
.rbc-today {
|
||||
border-color: #1890ff !important;
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
.rbc-header {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-day-bg + .rbc-day-bg {
|
||||
// margin-left: 8px;
|
||||
// border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
|
||||
// border-left-width: 0;
|
||||
// border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.rbc-overlay {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
margin-top: 5px;
|
||||
border-radius: 2px;
|
||||
// border: 1px solid #e5e5e5;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.rbc-overlay > * + * {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.rbc-overlay-header {
|
||||
font-weight: 500;
|
||||
min-height: 32px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin: -12px -16px 12px -16px;
|
||||
padding: 5px 16px 4px;
|
||||
}
|
||||
|
||||
.rbc-agenda-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table {
|
||||
width: 100%;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
|
||||
padding: 5px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
|
||||
padding: 3px 5px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rbc-agenda-time-cell {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.rbc-agenda-time-cell .rbc-continues-after:after {
|
||||
content: ' »';
|
||||
}
|
||||
.rbc-agenda-time-cell .rbc-continues-prior:before {
|
||||
content: '« ';
|
||||
}
|
||||
|
||||
.rbc-agenda-date-cell,
|
||||
.rbc-agenda-time-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rbc-agenda-event-cell {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rbc-time-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
.rbc-time-column .rbc-timeslot-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rbc-timeslot-group {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
min-height: 40px;
|
||||
line-height: 39px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
// cursor: pointer;
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.rbc-time-gutter,
|
||||
.rbc-header-gutter {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.rbc-label {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.rbc-day-slot {
|
||||
position: relative;
|
||||
}
|
||||
.rbc-day-slot .rbc-events-container {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.rbc-day-slot .rbc-events-container.rbc-rtl {
|
||||
left: 10px;
|
||||
right: 0;
|
||||
}
|
||||
.rbc-day-slot .rbc-event {
|
||||
border: 1px solid #265985;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
min-height: 20px;
|
||||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.rbc-day-slot .rbc-event-label {
|
||||
flex: none;
|
||||
padding-right: 5px;
|
||||
width: auto;
|
||||
}
|
||||
.rbc-day-slot .rbc-event-content {
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
word-wrap: break-word;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
min-height: 1em;
|
||||
}
|
||||
.rbc-day-slot .rbc-time-slot {
|
||||
// border-top: 1px solid #f7f7f7;
|
||||
}
|
||||
.rbc-time-header-gutter {
|
||||
line-height: 40px;
|
||||
}
|
||||
.rbc-time-header-cell {
|
||||
min-height: 32px !important;
|
||||
}
|
||||
.rbc-calendar.view-week {
|
||||
.rbc-time-header-cell {
|
||||
margin-top: -32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.rbc-time-view {
|
||||
padding-top: 32px;
|
||||
border-top: 0;
|
||||
}
|
||||
.rbc-header {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.rbc-time-header-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
.rbc-time-header-gutter {
|
||||
padding: 0;
|
||||
padding-top: 2px;
|
||||
> div {
|
||||
border-top: 2px solid #f0f0f0;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rbc-time-view-resources .rbc-time-gutter,
|
||||
.rbc-time-view-resources .rbc-time-header-gutter {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
z-index: 10;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header-content {
|
||||
min-width: auto;
|
||||
flex: 1 0 0;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-time-header-cell-single-day {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-day-slot {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.rbc-time-view-resources .rbc-header,
|
||||
.rbc-time-view-resources .rbc-day-bg {
|
||||
width: 140px;
|
||||
flex: 1 1 0;
|
||||
flex-basis: 0 px;
|
||||
}
|
||||
|
||||
.rbc-time-header-content + .rbc-time-header-content {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.rbc-time-slot {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.rbc-time-slot.rbc-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rbc-day-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rbc-slot-selection {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
font-size: 75%;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.rbc-slot-selecting {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.rbc-time-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
min-height: 0;
|
||||
}
|
||||
.rbc-time-view .rbc-time-gutter {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-cell {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-time-view .rbc-allday-events {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
.rbc-time-view .rbc-row {
|
||||
box-sizing: border-box;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.rbc-time-header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
.rbc-time-header.rbc-overflowing {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-time-header.rbc-overflowing {
|
||||
border-right-width: 0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-time-header > .rbc-row:first-child {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-time-header > .rbc-row.rbc-row-resource {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.rbc-time-header-cell-single-day {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rbc-time-header-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
// border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-time-header-content {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-time-header-content > .rbc-row.rbc-row-resource {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rbc-time-content {
|
||||
display: flex;
|
||||
flex: 1 0 0%;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
.rbc-time-content > .rbc-time-gutter {
|
||||
flex: none;
|
||||
}
|
||||
.rbc-time-content > * + * > * {
|
||||
// border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-rtl .rbc-time-content > * + * > * {
|
||||
border-left-width: 0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.rbc-time-content > .rbc-day-slot {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.rbc-current-time-indicator {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: #74ad31;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.view-type-calendar .action-buttons {
|
||||
position: relative !important;
|
||||
left: 0 !important;
|
||||
.filter-action-button {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
.rbc-toolbar .rbc-toolbar-label {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.rbc-toolbar {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.rbc-header {
|
||||
padding: 4px !important;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user