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

Merge pull request #2063 from mohammadamer/patch-1 

Improve year view and highlight today style - hacktoberfeast
This commit is contained in:
Hugo Bernier 2021-10-30 00:47:17 -04:00 committed by GitHub
parent 4cae8f5e6b a2df9ea25f
commit dc98f48fb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/react-calendar/README.md
View File

@ -119,7 +119,7 @@ Calendar Web Part|[Eli H. Schei](https://github.com/Eli-Schei)
Calendar Web Part|[Hugo Bernier](https://github.com/hugoabernier) ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/))
Calendar Web Part|[João Mendes](https://github.com/joaojmendes)
Calendar Web Part|[Mohamed Derhalli](https://github.com/derhallim)
Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@Mohammad3mer](https://twitter.com/Mohammad3mer))
Calendar Web PArt|[Mohammed Amer](https://github.com/mohammadamer) ([@Mohammad3mer](https://twitter.com/Mohammad3mer), https://www.linkedin.com/in/mohammad3mer/)
Calendar Web Part|[Nanddeep Nachan](https://github.com/nanddeepn) ([@NanddeepNachan](https://twitter.com/NanddeepNachan))
## Version history
@ -139,6 +139,7 @@ Version|Date|Comments
1.0.10|March 27, 2021|Updated prompt message when deleting single v/s multi-event.
1.0.11|May 10, 2021|Optimized page refresh using local storage
1.0.12|June 21, 2021|Fixes overlap with Year-view and the comment section by adding a vertical scrollbar.
1.0.13|October 2, 2021|Fix to make sure Today is always visible and highlighted.
## Minimal Path to Awesome
@ -160,11 +161,11 @@ Version|Date|Comments
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).

2
samples/react-calendar/assets/sample.json
View File

@ -9,7 +9,7 @@
"This Web Part allows you to manage events in a calendar. Uses a list of existing calendars on any website. The location and name of the list and the dates of the events to be displayed are defined in the properties of the web part."
],
"created": "2020-12-04",
"modified": "2021-07-14",
"modified": "2021-10-02",
"products": [
"SharePoint",
"Office"

80
samples/react-calendar/src/webparts/calendar/components/Year.module.scss
View File

@ -4,50 +4,52 @@
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
.month {
margin: 5px 10px 15px 10px;
}
.month {
margin: 5px 10px 15px 10px;
.monthName {
color: $ms-color-themeDark;
font-weight: bold;
margin-bottom: 10px;
}
.monthName {
color: $ms-color-themePrimary;
font-weight: bold;
margin-bottom: 10px;
}
.day {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border: dotted 1px;
border-radius: 50%;
transform: scale(0.9, 0.9);
}
.day {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border: dotted 1px;
border-radius: 50%;
transform: scale(0.9, 0.9);
}
.date {
width: 30px;
height: 30px;
background: white;
border-radius: 50px;
border: none;
outline: none;
}
.date {
width: 30px;
height: 30px;
border-radius: 50px;
border: none;
outline: none;
.date.inMonth:hover {
cursor: pointer;
background: $ms-color-themeDark;
color: white;
font-weight: bold;
}
&.inMonth {
&:hover {
cursor: pointer;
background: $ms-color-themePrimary;
color: white;
font-weight: bold;
}
}
.today {
background: $ms-color-themeDark;
}
&.today {
background: $ms-color-themePrimary;
color: white;
}
.date.prevMonth,
.date.nextMonth {
color: grey;
.date.prevMonth,
.date.nextMonth {
color: grey;
}
}
}
}

2
samples/react-calendar/src/webparts/calendar/components/Year.tsx
View File

@ -39,7 +39,7 @@ function CalendarDate(props) {
const { dateToRender, dateOfMonth } = props;
const today =
dateToRender.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
? 'today'
? styles.today
: '';
if (dateToRender.month() < dateOfMonth.month()) {