honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add custom toolbar

This commit is contained in:
Abderahman88 2020-10-18 00:11:54 +01:00
parent 0d393f0658
commit b4332a36a3
7 changed files with 301 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
samples/react-calendar/config/config.json
View File

@ -16,6 +16,7 @@
"localizedResources": {
"CalendarWebPartStrings": "lib/webparts/calendar/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
"CalendarToolbar": "lib/webparts/calendar/components/Toolbar.jsx"
}
}

2
samples/react-calendar/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "react-calendar-client-side-solution",
"id": "3a13208b-3874-4036-9262-4edd22e88187",
"version": "1.0.0.0",
"version": "1.0.0.1",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false

17
samples/react-calendar/src/webparts/calendar/components/Calendar.tsx
View File

@ -9,6 +9,8 @@ import * as strings from 'CalendarWebPartStrings';
import 'react-big-calendar/lib/css/react-big-calendar.css';
require('./calendar.css');
import { CommunicationColors , FluentCustomizations, FluentTheme } from '@uifabric/fluent-theme';
import CalendarToolbar from './CustomToolbar';
import Year from './Year';
import {
Customizer,
@ -311,7 +313,6 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
* @memberof Calendar
*/
public render(): React.ReactElement<ICalendarProps> {
return (
<Customizer {...FluentCustomizations}>
@ -350,11 +351,19 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
eventPropGetter={this.eventStyleGetter}
onSelectSlot={this.onSelectSlot}
components={{
event: this.renderEvent
event: this.renderEvent,
toolbar: CalendarToolbar,
}}
onSelectEvent={this.onSelectEvent}
defaultDate={moment().startOf('day').toDate()}
/*views={{
day: true,
week: true,
month: true,
agenda: true,
work_week: false
}}*/
//views={['month','week','day','agenda']}
messages={
{
'today': strings.todayLabel,
@ -363,7 +372,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
'month': strings.monthLabel,
'week': strings.weekLabel,
'day': strings.dayLable,
'showMore': total => `+${total} ${strings.showMore}`
'showMore': total => `+${total} ${strings.showMore}`,
}
}
/>

91
samples/react-calendar/src/webparts/calendar/components/CustomToolbar.tsx Normal file
View File

@ -0,0 +1,91 @@
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import PropTypes from 'prop-types';
import { View, Views, Navigate, Messages } from "react-big-calendar";
import * as strings from 'CalendarWebPartStrings';
//require('./calendar.css');
export interface ICustomToolbarProps {
date: Date;
view: View;
views: Views;
label: string;
localizer: { messages: Messages };
onNavigate: (navigate: Navigate, date?: Date) => void;
onView: (view: View) => void;
children?: React.ReactNode;
}
export interface ICustomToolbarState {
activeView: string;
}
export default class CalendarToolbar extends React.Component<ICustomToolbarProps, ICustomToolbarState> {
public constructor(props) {
super(props);
this.state = {
activeView: 'month'
};
}
public componentDidMount() {
const view = this.props.view;
console.log(view);
}
private navigate = (action) => {
this.props.onNavigate(action);
}
private view = (view) => {
this.props.onView(view);
this.setState({activeView: view});
}
/*private viewNamesGroup = (messages) => {
let viewNames = this.props.views
const view = this.props.view
if (viewNames.length > 1) {
return viewNames.map(name => (
<button
type="button"
key={name}
className={css({ 'rbc-active': view === name })}
onClick={this.view.bind(null, name)}
>
{messages[name]}
</button>
))
}
}*/
public render() {
const {activeView} = this.state;
return (
<div className="rbc-toolbar">
<div className="rbc-btn-group">
{/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
<button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
<button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
<button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
</div>
<span className="rbc-toolbar-label">{this.props.label}</span>
<div className="rbc-btn-group">
<button type="button" className={css({ 'rbc-active': activeView === "month" })} onClick={() => this.view('month')}>{strings.monthLabel}</button>
<button type="button" className={css({ 'rbc-active': activeView === "week" })} onClick={() => this.view('week')}>{strings.weekLabel}</button>
<button type="button" className={css({ 'rbc-active': activeView === "day" })} onClick={() => this.view('day')}>{strings.dayLable}</button>
<button type="button" className={css({ 'rbc-active': activeView === "year" })} onClick={() => this.view('year')}>{"YEAR"}</button>
<button type="button" className={css({ 'rbc-active': activeView === "agenda" })} onClick={() => this.view('agenda')}>{strings.agenda}</button>
</div>
{/*<span className="rbc-btn-group">{this.viewNamesGroup(this.props.localizer.messages)}</span>*/}
</div>
);
}
}

8
samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx
View File

@ -10,10 +10,11 @@ export default class CalendarToolbar extends Toolbar {
}
render() {
return (
£ return (
<div>
<div className="rbc-btn-group">
<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>
{/*<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>*/}
<button type="button" onClick={() => this.navigate('TODAY')}>VANDAAGHAHA</button>
<button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
<button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
</div>
@ -22,10 +23,11 @@ export default class CalendarToolbar extends Toolbar {
<button type="button" onClick={this.view.bind(null, 'month')}>{strings.monthLabel}</button>
<button type="button" onClick={this.view.bind(null, 'week')}>{strings.weekLabel}</button>
<button type="button" onClick={this.view.bind(null, 'day')}>{strings.dayLable}</button>
<button type="button" onClick={this.view.bind(null, 'year')}>{"YEAR"}</button>
<button type="button" onClick={this.view.bind(null, 'agenda')}>{strings.agenda}</button>
</div>
</div>
);
}
}
module.export = CalendarToolbar;
//module.export = CalendarToolbar;

185
samples/react-calendar/src/webparts/calendar/components/Year.tsx Normal file
View File

@ -0,0 +1,185 @@
import React from 'react'
import moment from 'moment'
import dates from 'react-big-calendar/lib/utils/dates'
import { navigate } from 'react-big-calendar/lib/utils/constants'
function createCalendar(currentDate) {
if (!currentDate) {
currentDate = moment()
} else {
currentDate = moment(currentDate)
}
const first = currentDate.clone().startOf('month')
const last = currentDate.clone().endOf('month')
const weeksCount = Math.ceil((first.day() + last.date()) / 7)
//const a = { currentDate, first, last };
const calendar = [currentDate, first, last];
for (let weekNumber = 0; weekNumber < weeksCount; weekNumber++) {
const week = []
calendar.push(week)
//calendar.year = currentDate.year()
//calendar.month = currentDate.month()
for (let day = 7 * weekNumber; day < 7 * (weekNumber + 1); day++) {
const date = currentDate.clone().set('date', day + 1 - first.day())
date.calendar = calendar
week.push(date)
}
}
return calendar
}
function CalendarDate(props) {
const { dateToRender, dateOfMonth } = props
const today =
dateToRender.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
? 'today'
: ''
if (dateToRender.month() < dateOfMonth.month()) {
return (
<button disabled={true} className="date prev-month">
{dateToRender.date()}
</button>
)
}
if (dateToRender.month() > dateOfMonth.month()) {
return (
<button disabled={true} className="date next-month">
{dateToRender.date()}
</button>
)
}
return (
<button
className={`date in-month ${today}`}
onClick={() => props.onClick(dateToRender)}>
{dateToRender.date()}
</button>
)
}
export interface IYearCalendarProps {
date: Date;
}
export interface IYearCalendarState {
calendar: any;
}
export interface ICalendar {
currentDate: any;
first: any;
last: any;
year: any;
month: any;
}
class YearCalendar extends React.Component<IYearCalendarProps, IYearCalendarState> {
public constructor(props) {
super(props);
this.state = {
calendar: undefined
};
}
public componentDidMount() {
this.setState({ calendar: createCalendar(this.props.date) })
}
public componentDidUpdate(prevProps) {
if (this.props.date !== prevProps.date) {
this.setState({ calendar: createCalendar(this.props.date) })
}
}
render() {
if (!this.state.calendar) {
return null
}
return (
<div className="month">
<div className="month-name">
{this.state.calendar.currentDate.format('MMMM').toUpperCase()}
</div>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
<span key={index} className="day">
{day}
</span>
))}
{this.state.calendar.map((week, index) => (
<div key={index}>
{week.map(date => (
<CalendarDate
key={date.date()}
dateToRender={date}
dateOfMonth={this.state.calendar.currentDate}
onClick={date =>
alert(`Will go to daily-view of ${date.format('YYYY-MM-DD')}`)
}
/>
))}
</div>
))}
</div>
)
}
}
export interface IYearProps {
date: any;
}
class Year extends React.Component<IYearProps> {
private range = date => {
return [dates.startOf(date, 'year')]
}
private navigate = (date, action) => {
switch (action) {
case navigate.PREVIOUS:
return dates.add(date, -1, 'year')
case navigate.NEXT:
return dates.add(date, 1, 'year')
default:
return date
}
}
//private title = (date, { localizer }) => {
// localizer.format(date, 'yearHeaderFormat');
//}
public render() {
let { date, ...props } = this.props
let range = this.range(date)
const months = []
const firstMonth = dates.startOf(date, 'year')
for (let i = 0; i < 12; i++) {
months.push(
<YearCalendar key={i + 1} date={dates.add(firstMonth, i, 'month')} />
)
}
return <div className="year">{months.map(month => month)}</div>
}
}
export default Year

5
samples/react-calendar/tsconfig.json
View File

@ -14,6 +14,8 @@
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"allowSyntheticDefaultImports":true,
//"allowJs": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
@ -29,7 +31,8 @@
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.jsx"
],
"exclude": [
"node_modules",