Merge pull request #1245 from derhallim/master
Update calendar styles to match applied theme
This commit is contained in:
Hugo Bernier
GitHub
commit
c571b9588a
|
|
@ -1,3 +1,18 @@
|
|||
---
|
||||
page_type: sample
|
||||
products:
|
||||
- office-sp
|
||||
languages:
|
||||
- javascript
|
||||
- typescript
|
||||
extensions:
|
||||
contentType: samples
|
||||
technologies:
|
||||
- SharePoint Framework
|
||||
platforms:
|
||||
- react
|
||||
createdDate: 04/25/2017 12:00:00 AM
|
||||
---
|
||||
# React Calendar
|
||||
|
||||
## Summary
|
||||
|
|
@ -9,83 +24,68 @@ Each category has its own color that is generated in the load.
|
|||
|
||||
The Web Part checks the user's permissions for the View, Add, Edit, and Delete events.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Web Part - Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -101,14 +101,14 @@ Site Url of Calendar List | Text| yes|
|
|||
Calendar list| Choice/Dropdown | yes| this is filled with all list of type "event list" created
|
||||
Start Date | Date | yes | Event Date
|
||||
End Date| Date| yes | Event Date
|
||||
|
||||
|
||||
## Solution
|
||||
The Web Part Use PnPjs library, Office-ui-fabric-react components. react Big-Calendar Compoment
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
Calendar Web Part|João Mendes
|
||||
Calendar Web Part|João Mendes
|
||||
Calendar Web Part|Mohamed Derhalli
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -116,8 +116,10 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0.0|April 25, 2019|Initial release
|
||||
1.0.1|June 10, 2019|update add recurrence events
|
||||
1.0.2|April 25, 2020|Update styles according to the applied theme
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
|
@ -130,9 +132,6 @@ Version|Date|Comments
|
|||
- `gulp build`
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- `Add to AppCatalog and deploy`
|
||||
|
||||
|
||||
|
||||
- Add to **AppCatalog** and deploy
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-calendar" />
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-calendar",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -53,10 +53,10 @@
|
|||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
|
||||
"@microsoft/rush-stack-compiler-3.2": "0.3.17",
|
||||
"@microsoft/sp-build-web": "1.8.2",
|
||||
"@microsoft/sp-build-web": "^1.10.0",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2",
|
||||
"@microsoft/sp-tslint-rules": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "^1.10.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@types/xml2js": "^0.4.4",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
$ms-greenLight: "[theme:greenLight, default:#bad80a]";
|
||||
$ms-neutralSecondaryAlt: "[theme:info, default:#767676]";
|
||||
$ms-neutralLight: "[theme:infoBackground, default:#eaeaea]";
|
||||
$ms-magenta: "[theme:magenta, default:#b4009e]";
|
||||
$ms-magentaDark: "[theme:magentaDark, default:#5c005c]";
|
||||
$ms-magentaLight: "[theme:magentaLight, default:#e3008c]";
|
||||
$ms-neutralDark: "[theme:neutralDark, default:#212121]";
|
||||
$ms-neutralLight: "[theme:neutralLight, default:#eaeaea]";
|
||||
$ms-neutralLighter: "[theme:neutralLighter, default:#f4f4f4]";
|
||||
$ms-neutralLighterAlt: "[theme:neutralLighterAlt, default:#f8f8f8]";
|
||||
$ms-neutralPrimary: "[theme:neutralPrimary, default:#333333]";
|
||||
$ms-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3C3C3C]";
|
||||
$ms-neutralQuaternary: "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
|
||||
$ms-neutralQuaternaryAlt: "[theme:neutralQuaternary, default:#dadada]";
|
||||
$ms-neutralSecondary: "[theme:neutralQuaternaryAlt, default:#666666]";
|
||||
$ms-neutralSecondaryAlt: "[theme:neutralSecondary, default:#767676]";
|
||||
$ms-neutralTertiary: "[theme:neutralSecondaryAlt, default:#a6a6a6]";
|
||||
$ms-neutralTertiaryAlt: "[theme:neutralTertiary, default:#c8c8c8]";
|
||||
$ms-white: "[theme:neutralTertiaryAlt, default:#ffffff]";
|
||||
$ms-orange: "[theme:orange, default:#d83b01]";
|
||||
$ms-orangeLight: "[theme:orangeLight, default:#ea4300]";
|
||||
$ms-orangeLighter: "[theme:orangeLighter, default:#ff8c00]";
|
||||
$ms-primaryBackground: "[theme:primaryBackground, default:#0078d7]";
|
||||
$ms-primaryText: "[theme:primaryText, default:#0078d7]";
|
||||
$ms-purple: "[theme:purple, default:#5c2d91]";
|
||||
$ms-purpleDark: "[theme:purpleDark, default:#32145a]";
|
||||
$ms-purpleLight: "[theme:purpleLight, default:#b4a0ff]";
|
||||
$ms-red: "[theme:red, default:#e81123]";
|
||||
$ms-redDark: "[theme:redDark, default:#a80000]";
|
||||
$ms-success: "[theme:success, default:#107c10]";
|
||||
$ms-successBackground: "[theme:successBackground, default:#dff6dd]";
|
||||
$ms-teal: "[theme:teal, default:#008272]";
|
||||
$ms-tealDark: "[theme:tealDark, default:#004b50]";
|
||||
$ms-tealLight: "[theme:tealLight, default:#00b294]";
|
||||
$ms-themeAccent: "[theme:themeAccent, default:inherit]";
|
||||
$ms-themeAccentTranslucent10: "[theme:themeAccentTranslucent10, default:inherit]";
|
||||
$ms-themeDark: "[theme:themeDark, default:#005a9e]";
|
||||
$ms-themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
|
||||
$ms-themeDarker: "[theme:themeDarker, default:#004578]";
|
||||
$ms-themeLight: "[theme:themeLight, default:#b3d6f2]";
|
||||
$ms-themeLightAlt: "[theme:themeLightAlt, default:inherit]";
|
||||
$ms-themeLighter: "[theme:themeLighter, default:#deecf9]";
|
||||
$ms-themeLighterAlt: "[theme:themeLighterAlt, default:#eff6fc]";
|
||||
$ms-themePrimary: "[theme:themePrimary, default:#0078d7]";
|
||||
$ms-themeSecondary: "[theme:themeSecondary, default:#2488d8]";
|
||||
$ms-themeTertiary: "[theme:themeTertiary, default:#69afe5]";
|
||||
$ms-themeTertiaryAlt: "[theme:themeTertiaryAlt, default:#c8c8c8]";
|
||||
$ms-white: "[theme:white, default:#ffffff]";
|
||||
$ms-whiteTranslucent40: "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
|
||||
$ms-yellow: "[theme:yellow, default:#ffb900]";
|
||||
$ms-yellowLight: "[theme:yellowLight, default:#fff100]";
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import "./node_modules/spfx-uifabric-themes/office.theme.vars";
|
||||
@import '../../themes';
|
||||
|
||||
:export {
|
||||
themeDark: $ms-color-themePrimary;
|
||||
|
|
@ -17,6 +18,16 @@
|
|||
display: "block";
|
||||
}
|
||||
|
||||
/* Added styles for days within the same month/week */
|
||||
.dayPropGetter{
|
||||
background-color: $ms-primaryBackground;
|
||||
border-radius: '0px';
|
||||
opacity: 0.8;
|
||||
color: $ms-themeAccent;
|
||||
border: '0px';
|
||||
display: 'block';
|
||||
}
|
||||
|
||||
.Documentcard {
|
||||
width: "100%";
|
||||
height: "100%";
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ import { Event } from '../../../controls/Event/event';
|
|||
import { IPanelModelEnum } from '../../../controls/Event/IPanelModeEnum';
|
||||
import { IEventData } from './../../../services/IEventData';
|
||||
import { IUserPermissions } from './../../../services/IUserPermissions';
|
||||
|
||||
|
||||
|
||||
const localizer = BigCalendar.momentLocalizer(moment);
|
||||
|
||||
/**
|
||||
|
|
@ -290,6 +293,18 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} date
|
||||
* @memberof Calendar
|
||||
*/
|
||||
public dayPropGetter(date: Date) {
|
||||
return {
|
||||
className: styles.dayPropGetter
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {React.ReactElement<ICalendarProps>}
|
||||
|
|
@ -326,6 +341,7 @@ export default class Calendar extends React.Component<ICalendarProps, ICalendarS
|
|||
{this.state.isloading ? <Spinner size={SpinnerSize.large} label={strings.LoadingEventsLabel} /> :
|
||||
<div className={styles.container}>
|
||||
<BigCalendar
|
||||
dayPropGetter = {this.dayPropGetter}
|
||||
localizer={localizer}
|
||||
selectable
|
||||
events={this.state.eventData}
|
||||
|
|
|
|||
Loading…
Reference in New Issue