├── .nvmrc
├── .DS_Store
├── imgs
├── main.png
└── smallScreen.png
├── .npmignore
├── .babelrc
├── .gitignore
├── LICENSE
├── webpack.config.js
├── package.json
├── README.md
├── src
├── style.css
└── index.js
└── yarn.lock
/.nvmrc:
--------------------------------------------------------------------------------
1 | v6.10
2 |
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hurkanyakay/react-weekly-day-picker/HEAD/.DS_Store
--------------------------------------------------------------------------------
/imgs/main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hurkanyakay/react-weekly-day-picker/HEAD/imgs/main.png
--------------------------------------------------------------------------------
/imgs/smallScreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hurkanyakay/react-weekly-day-picker/HEAD/imgs/smallScreen.png
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # npmignore
2 | node_modules
3 | src
4 | .DS_Store
5 | webpack.config.js
6 | .babelrc
7 | .gitignore
8 | yarn.lock
9 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets" : [ "es2015", "react", "stage-0"],
3 | "plugins": [
4 | "transform-object-rest-spread",
5 | "transform-react-jsx",
6 | "transform-class-properties"
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | .DS_Store
5 | npm-debug.log*
6 |
7 | # Runtime data
8 | pids
9 | *.pid
10 | *.seed
11 |
12 | # Directory for instrumented libs generated by jscoverage/JSCover
13 | lib-cov
14 |
15 | # Coverage directory used by tools like istanbul
16 | coverage
17 |
18 | # nyc test coverage
19 | .nyc_output
20 |
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 |
24 | # node-waf configuration
25 | .lock-wscript
26 |
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 |
30 | # Dependency directories
31 | node_modules
32 | jspm_packages
33 |
34 | # Optional npm cache directory
35 | .npm
36 |
37 | # Optional REPL history
38 | .node_repl_history
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Hürkan Yakay
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 |
4 | const BUILD_DIR = path.resolve(__dirname, 'lib');
5 | const APP_DIR = path.resolve(__dirname, 'src');
6 |
7 | const WebpackConfig = {
8 |
9 | entry: APP_DIR + '/index.js',
10 |
11 | output: {
12 | path: BUILD_DIR,
13 | filename: 'index.js',
14 | libraryTarget: 'umd',
15 | // libraryTarget: 'commonjs2'
16 | library: 'ReactWeeklyDayPicker'
17 | },
18 |
19 | module: {
20 | rules: [
21 | {
22 | test: /\.css$/,
23 | use: [ 'style-loader', 'css-loader' ]
24 | },
25 | {
26 | loader: 'babel-loader',
27 | test: /\.js$/,
28 | exclude: /node_modules/,
29 | include : APP_DIR,
30 | options: {
31 | presets: [ 'env', 'react', 'es2015', 'stage-0']
32 | }
33 | }
34 | ],
35 | },
36 | externals: {
37 | 'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
38 | }
39 | }
40 |
41 |
42 | // webpack production config.
43 | if ( process.env.NODE_ENV === 'production' ) {
44 |
45 | WebpackConfig.externals = {
46 | 'react': 'react',
47 | 'react-dom': 'react-dom'
48 | };
49 |
50 | WebpackConfig.plugins = [
51 | new webpack.optimize.AggressiveMergingPlugin(),
52 | new webpack.optimize.UglifyJsPlugin({
53 | beautify: false,
54 | mangle: {
55 | screw_ie8: true,
56 | },
57 | compress: {
58 | warnings: false,
59 | screw_ie8: true
60 | },
61 | comments: false
62 | }),
63 | ];
64 |
65 | }
66 |
67 |
68 | module.exports = WebpackConfig;
69 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-weekly-day-picker",
3 | "version": "1.0.3",
4 | "description": "React Weekly Day Picker",
5 | "main": "lib/index.js",
6 | "author": {
7 | "name": "Hürkan Yakay"
8 | },
9 | "scripts": {
10 | "start": "cross-env NODE_ENV=development webpack -w",
11 | "build:dev": "cross-env NODE_ENV=development webpack",
12 | "build:production": "cross-env NODE_ENV=production webpack -p",
13 | "test": "echo \"Error: no test specified\" && exit 1"
14 | },
15 | "keywords": [
16 | "Day Picker",
17 | "React Day Picker",
18 | "React",
19 | "Date Picker",
20 | "calendly"
21 | ],
22 | "homepage": "https://github.com/hurkanyakay/react-weekly-day-picker",
23 | "repository": "https://github.com/hurkanyakay/react-weekly-day-picker.git",
24 | "bugs": {
25 | "url": "https://github.com/hurkanyakay/react-weekly-day-picker/issues"
26 | },
27 | "license": "MIT",
28 | "peerDependency": {
29 | "react": "^15.5.4",
30 | "react-dom": "^15.5.4"
31 | },
32 | "devDependencies": {
33 | "babel-cli": "^6.24.1",
34 | "babel-core": "^6.25.0",
35 | "babel-loader": "^7.1.1",
36 | "babel-plugin-transform-class-properties": "^6.24.1",
37 | "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
38 | "babel-plugin-transform-object-rest-spread": "^6.23.0",
39 | "babel-plugin-transform-react-jsx": "^6.24.1",
40 | "babel-preset-env": "^1.6.0",
41 | "babel-preset-es2015": "^6.24.1",
42 | "babel-preset-react": "^6.24.1",
43 | "babel-preset-stage-0": "^6.24.1",
44 | "cross-env": "^5.0.1",
45 | "css-loader": "^0.28.4",
46 | "react": "^15.6.1",
47 | "react-dom": "^15.6.1",
48 | "style-loader": "^0.18.2",
49 | "webpack": "^3.3.0"
50 | },
51 | "dependencies": {
52 | "moment": "^2.18.1"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
4 |
5 | # React Weekly Day Picker
6 |
7 | This react component provides weekly view and day picker option like calendly.
8 |
9 | This component makes use of moment.js.
10 |
11 |
12 | ## Installation
13 |
14 | To install this Component, run `yarn add react-weekly-day-picker` or `npm install react-weekly-day-picker`.
15 |
16 |
17 | ## Usage
18 |
19 | To use the component, In your react application just do
20 |
21 | ```javascript
22 |
23 | ```
24 |
25 | ## Props
26 |
27 | You can also provide additional configuration like
28 |
29 | ```javascript
30 |
61 | ```
62 |
63 | ## Responsiveness and Mobil View
64 | When mobilView props is true, mobilView enables:
65 |
66 | 
67 |
68 |
69 | ## Styling and Css classes
70 |
71 | classNames prop overrides existed css classes
72 |
73 | ```javascript
74 | render() {
75 | const classNames = {
76 | container : '',
77 | prevWeekArrow: '',
78 | nextWeekArrow: '',
79 | dayBox: '',
80 | dayCircleContainer: '',
81 | dayCicle: '',
82 | dayCircleTodayText: '',
83 | dayCircleUnavailable: '',
84 | dayCircleUnavailableText: '',
85 | dayCicleSelected: '',
86 | }
87 | return (
88 |
91 | );
92 | }
93 | ```
94 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | /**
2 | * React Weekly Day Picker
3 | * stylesheet
4 | */
5 | .rwdpDayPickerContainer {
6 | /*width: 100%;*/
7 | display: block;
8 | position: relative;
9 | padding: 0 30px;
10 | }
11 | .rwdpDayBoxDesktop {
12 |
13 | }
14 | .rwdpDayBoxDesktop .rwdp-DayCircle-container{
15 | margin-top: 40px;
16 | margin-bottom: 20px;
17 | border:none;
18 | background: transparent;
19 | cursor: pointer;
20 | }
21 | .rwdpDayBoxDesktop .rwdp-DayCircle {
22 | border: 2px solid #4080ff;
23 | width: 80px;
24 | height: 80px;
25 | border-radius: 40px;
26 | color: #4080ff;
27 | position: relative;
28 | }
29 | .rwdpDayBoxDesktop .rwdp-DayCircle-selected {
30 | background: #4080ff;
31 | color: #fff;
32 | }
33 | .rwdpDayBoxDesktop .rwdp-DayCircle-unavailable {
34 | border-color: #a8a8a8;
35 | color: #a8a8a8;
36 | }
37 | .rwdpDayBoxDesktop .rwdp-DayCircle-today {
38 | color: #000;
39 | position: absolute;
40 | top: -28px;
41 | }
42 | .rwdpDayBoxDesktop .rwdp-DayCircle-unavailable-text {
43 | position: absolute;
44 | bottom: -28px;
45 | }
46 | .rwdpDayBoxMobil{
47 | margin-top: 20px;
48 | margin-bottom: 20px;
49 | }
50 | .rwdpDayBoxMobil .rwdp-DayCircle-container{
51 | padding: 0;
52 | border:none;
53 | background: transparent;
54 | cursor: pointer;
55 | }
56 | .rwdpDayBoxMobil .rwdp-DayCircle div{
57 | margin-top: 5px;
58 | }
59 | .rwdpDayBoxMobil .rwdp-DayCircle {
60 | border: 1px solid #4080ff;
61 | border-bottom: none;
62 | width: 100%;
63 | height: 80px;
64 | color: #4080ff;
65 | position: relative;
66 | }
67 | .rwdpDayBoxMobil .rwdp-DayCircle-container:last-child .rwdp-DayCircle {
68 | border-bottom: 1px solid #4080ff;
69 | }
70 | .rwdpDayBoxMobil .rwdp-DayCircle-selected {
71 | background: #4080ff;
72 | color: #fff;
73 | border-bottom: 1px solid #fff;
74 | }
75 | .rwdpDayBoxMobil .rwdp-DayCircle-today {
76 | color: #000;
77 | }
78 | .rwdpDayBoxMobil .rwdp-DayCircle-unavailable {
79 | border-color: #a8a8a8;
80 | color: #a8a8a8;
81 | }
82 | .rwdpDayBoxMobil .rwdp-DayCircle-container:last-child .rwdp-DayCircle-unavailable {
83 | border-bottom-color: #a8a8a8;
84 | }
85 | .rwdpPrevWeekArrow {
86 | width: 0;
87 | height: 0;
88 | border-top: 20px solid transparent;
89 | border-bottom: 20px solid transparent;
90 | border-right:20px solid #4080ff;
91 | position: absolute;
92 | top: calc(50% - 10px);
93 | left: 0px;
94 | cursor: pointer;
95 | }
96 | .rwdpNextWeekArrow {
97 | width: 0;
98 | height: 0;
99 | border-top: 20px solid transparent;
100 | border-bottom: 20px solid transparent;
101 | border-left:20px solid #4080ff;
102 | position: absolute;
103 | top: calc(50% - 10px);
104 | right: 0px;
105 | cursor: pointer;
106 | }
107 |
108 | .rwdp-flex-box {
109 | display: -webkit-box;
110 | display: -moz-box;
111 | display: box;
112 | display: -webkit-flex;
113 | display: -moz-flex;
114 | display: -ms-flexbox;
115 | display: flex
116 | }
117 | .rwdp-flex-row {
118 | -webkit-box-orient: horizontal;
119 | -moz-box-orient: horizontal;
120 | box-orient: horizontal;
121 | -webkit-flex-direction: row;
122 | -moz-flex-direction: row;
123 | flex-direction: row;
124 | -ms-flex-direction: row
125 | }
126 | .rwdp-flex-column {
127 | -webkit-box-orient: vertical;
128 | -moz-box-orient: vertical;
129 | box-orient: vertical;
130 | -webkit-flex-direction: column;
131 | -moz-flex-direction: column;
132 | flex-direction: column;
133 | -ms-flex-direction: column
134 | }
135 | .rwdp-justify-content-center {
136 | -webkit-box-pack: center;
137 | -moz-box-pack: center;
138 | box-pack: center;
139 | -webkit-justify-content: center;
140 | -moz-justify-content: center;
141 | -ms-justify-content: center;
142 | -o-justify-content: center;
143 | justify-content: center;
144 | -ms-flex-pack: center
145 | }
146 | .rwdp-justify-content-space-between {
147 | -webkit-box-pack: justify;
148 | -moz-box-pack: justify;
149 | box-pack: justify;
150 | -webkit-justify-content: space-between;
151 | -moz-justify-content: space-between;
152 | -ms-justify-content: space-between;
153 | -o-justify-content: space-between;
154 | justify-content: space-between;
155 | -ms-flex-pack: justify
156 | }
157 | .rwdp-justify-content-space-around {
158 | -webkit-box-pack: center;
159 | -moz-box-pack: center;
160 | box-pack: center;
161 | -webkit-justify-content: space-around;
162 | -moz-justify-content: space-around;
163 | -ms-justify-content: space-around;
164 | -o-justify-content: space-around;
165 | justify-content: space-around;
166 | -ms-flex-pack: center
167 | }
168 | .rwdp-align-items-center {
169 | -webkit-box-align: center;
170 | -moz-box-align: center;
171 | box-align: center;
172 | -webkit-align-items: center;
173 | -moz-align-items: center;
174 | -ms-align-items: center;
175 | -o-align-items: center;
176 | align-items: center;
177 | -ms-flex-align: center
178 | }
179 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React, { PropTypes } from 'react';
4 | import ReactDOM from 'react-dom';
5 | import moment from 'moment';
6 | import styles from './style.css';
7 |
8 | export class DayCircle extends React.Component {
9 | makeClassNames(){
10 | if(this.props.unavailable){
11 | return this.props.renderClassNames('dayCircleUnavailable','rwdp-DayCircle rwdp-DayCircle-unavailable rwdp-flex-box rwdp-flex-column rwdp-justify-content-center rwdp-align-items-center')
12 | } else if(this.props.selected){
13 | return this.props.renderClassNames('dayCicleSelected','rwdp-DayCircle rwdp-DayCircle-selected rwdp-flex-box rwdp-flex-column rwdp-justify-content-center rwdp-align-items-center')
14 | }else{
15 | return this.props.renderClassNames('dayCicle','rwdp-DayCircle rwdp-flex-box rwdp-flex-column rwdp-justify-content-center rwdp-align-items-center')
16 | }
17 | }
18 | renderToday(){
19 | if(moment().isSame(this.props.day, 'day') ){
20 | return(
21 |
22 | {this.props.todayText || '- TODAY -'}
23 |
24 | )
25 | }
26 | }
27 | renderUnavailable(){
28 | if(this.props.unavailable){
29 | return(
30 |
31 | {this.props.unavailableText || 'unavailable'}
32 |
33 | )
34 | }
35 | }
36 | render(){
37 | const { firstLineFormat, secondLineFormat, firstLineMobileFormat, secondLineMobileFormat } = this.props;
38 | const name = this.props.mobilView ? this.props.day.format(firstLineMobileFormat || 'dddd') : this.props.day.format(firstLineFormat || 'ddd')
39 | const date = this.props.mobilView ? this.props.day.format(secondLineMobileFormat || 'MMMM D, Y') : this.props.day.format(secondLineFormat || 'MMM D')
40 | return(
41 |
53 | )
54 | }
55 | }
56 |
57 |
58 | class ReactWeeklyDayPicker extends React.Component {
59 |
60 | constructor(props) {
61 | super(props);
62 | const selectedDays = this.props.selectedDays || []
63 | let convertedSelectedDays = selectedDays.map((day)=>{
64 | if(moment.isMoment(day)){
65 | return day;
66 | }else{
67 | return moment(day);
68 | }
69 | });
70 | let convertedStartDay;
71 | if(this.props.startDay){
72 | if(moment.isMoment(this.props.startDay)){
73 | convertedStartDay = this.props.startDay;
74 | }else{
75 | convertedStartDay = moment(this.props.startDay);
76 | }
77 | }else{
78 | convertedStartDay = moment();
79 | }
80 | this.state = {
81 | daysCount: this.props.daysCount || 7,
82 | selectedDays: convertedSelectedDays,
83 | startDay: convertedStartDay,
84 | multipleDaySelect: this.props.multipleDaySelect!=undefined ? this.props.multipleDaySelect : true,
85 | format: this.props.format!=undefined ? this.props.format : null,
86 | unavailables: this.props.unavailables != undefined ? this.props.unavailables : false,
87 | mobilView: this.props.mobilView != undefined ? this.props.mobilView : false,
88 | hiddens: this.props.hiddens != undefined ? this.props.hiddens : false,
89 | beforeToday: this.props.beforeToday != undefined ? this.props.beforeToday : false,
90 | }
91 | }
92 | componentWillReceiveProps(nextProps){
93 | const selectedDays = nextProps.selectedDays || []
94 | let convertedSelectedDays = selectedDays.map((day)=>{
95 | if(moment.isMoment(day)){
96 | return day;
97 | }else{
98 | return moment(day);
99 | }
100 | });
101 | let convertedStartDay;
102 | if(nextProps.startDay){
103 | if(moment.isMoment(nextProps.startDay)){
104 | convertedStartDay = nextProps.startDay;
105 | }else{
106 | convertedStartDay = moment(nextProps.startDay);
107 | }
108 | }else{
109 | convertedStartDay = this.state.startDay;
110 | }
111 | this.setState({
112 | selectedDays: convertedSelectedDays,
113 | startDay: convertedStartDay,
114 | daysCount: nextProps.daysCount || 7,
115 | multipleDaySelect: nextProps!=undefined ? nextProps.multipleDaySelect : true,
116 | format: nextProps.format!=undefined ? nextProps.format : null,
117 | unavailables: nextProps.unavailables != undefined ? nextProps.unavailables : false,
118 | mobilView: nextProps.mobilView != undefined ? nextProps.mobilView : false,
119 | hiddens: nextProps.hiddens != undefined ? nextProps.hiddens : false,
120 | beforeToday: nextProps.beforeToday != undefined ? nextProps.beforeToday : false,
121 | })
122 | }
123 | convertOutput(dayArray){
124 | let output = dayArray.map(d=>d.clone().format(this.state.format))
125 | if(this.props.selectDay){
126 | this.props.selectDay(output);
127 | }
128 | }
129 | convertOutputUnselect(day){
130 | let output = day.clone().format(this.state.format);
131 | if(this.props.unselectDay){
132 | this.props.unselectDay(output);
133 | }
134 | }
135 | daySelect=(day)=>{
136 | if(this.state.multipleDaySelect){
137 | const newArray = this.state.selectedDays;
138 | let deleting = false;
139 | this.state.selectedDays.forEach((d,i)=>{
140 | if( day.isSame(d, 'day') ){
141 | newArray.splice(i, 1);
142 | deleting = true;
143 | }
144 | });
145 | if(!deleting){
146 | this.setState({
147 | selectedDays: [...this.state.selectedDays, day]
148 | });
149 | this.convertOutput([...this.state.selectedDays, day])
150 | }else{ //remove existed day
151 | this.convertOutputUnselect(day);
152 | this.setState({
153 | selectedDays: newArray,
154 | })
155 | this.convertOutput(newArray)
156 | }
157 | }else{
158 | if( day.isSame(this.state.selectedDays[0], 'day')){ //remove existed day
159 | this.convertOutputUnselect(day);
160 | if(this.props.unselectable) {
161 | this.setState({
162 | selectedDays: []
163 | })
164 | this.convertOutput([])
165 | }
166 | }else{
167 | this.setState({
168 | selectedDays: [day]
169 | })
170 | this.convertOutput([day])
171 | }
172 | }
173 |
174 | }
175 | checkSelectedDay(day){
176 | let selected = false;
177 | if(this.state.selectedDays.length > 0){
178 | this.state.selectedDays.forEach((d,i)=>{
179 | if( day.isSame(d, 'day') ){
180 | selected = true;
181 | }
182 | })
183 | }
184 | return selected;
185 | }
186 | checkUnavailables(day){
187 | let unavailable = false;
188 | if(this.state.unavailables){
189 | if(this.state.unavailables.weekly){
190 | this.state.unavailables.weekly.forEach((d,i)=>{
191 | if( day.weekday() == d ){
192 | unavailable = true;
193 | }
194 | });
195 | }
196 | if(this.state.unavailables.dates){
197 | this.state.unavailables.dates.forEach((d,i)=>{
198 | if( day.isSame(moment(d), 'day') ){
199 | unavailable = true;
200 | }
201 | });
202 | }
203 | if(this.state.unavailables.relative){
204 | this.state.unavailables.relative.forEach((r,i)=>{
205 | if( day.isSame(moment().clone().add(r, 'days'), 'day') ){
206 | unavailable = true;
207 | }
208 | });
209 | }
210 | }
211 |
212 | if(!this.state.beforeToday){
213 | if(day.isBefore(moment(), 'day') ){
214 | unavailable = true;
215 | }
216 | }
217 | return unavailable;
218 | }
219 | checkHiddenDay(day){
220 | let hidden = false;
221 | if(this.state.hiddens){
222 | if(this.state.hiddens.weekly){
223 | this.state.hiddens.weekly.forEach((d,i)=>{
224 | if( day.weekday() == d ){
225 | hidden = true;
226 | }
227 | });
228 | }
229 | if(this.state.hiddens.dates){
230 | this.state.hiddens.dates.forEach((d,i)=>{
231 | if(day.isSame(moment(d), 'day')){
232 | hidden = true;
233 | }
234 | });
235 | }
236 | if(this.state.hiddens.relative){
237 | this.state.hiddens.relative.forEach((r,i)=>{
238 | if( day.isSame(moment().clone().add(r, 'days'), 'day') ){
239 | hidden = true;
240 | }
241 | });
242 | }
243 | }
244 | return hidden;
245 | }
246 | prevWeek=()=>{
247 | this.setState({
248 | startDay: this.state.startDay.clone().add(-this.state.daysCount, 'days')
249 | },()=>{
250 | if (this.props.onPrevClick) {
251 | this.props.onPrevClick(this.state.startDay, this.state.selectedDays);
252 | }
253 | })
254 | }
255 | nextWeek=()=>{
256 | this.setState({
257 | startDay: this.state.startDay.clone().add(this.state.daysCount, 'days')
258 | },()=>{
259 | if (this.props.onNextClick) {
260 | this.props.onNextClick(this.state.startDay, this.state.selectedDays);
261 | }
262 | })
263 | }
264 | renderDesktopView(weekdays){
265 | const dayComps = weekdays.map((day,i)=> )
266 | return(
267 |
268 | {dayComps}
269 |
270 | )
271 | }
272 | renderMobilView(weekdays){
273 | const dayComps = weekdays.map((day,i)=> )
274 | return(
275 |
276 | {dayComps}
277 |
278 | )
279 | }
280 | renderClassNames=(type,name)=>{
281 | if(this.props.classNames){
282 | if(this.props.classNames[type]){
283 | return this.props.classNames[type]
284 | }
285 | }
286 | return name;
287 | }
288 | render(){
289 | const startDay = this.state.startDay;
290 | const weekdays = [];
291 | for (var index = 0; weekdays.length < this.state.daysCount; index++) {
292 | let day = startDay.clone().add(index, 'days');
293 | if(!this.checkHiddenDay(day)){
294 | weekdays.push(day);
295 | }
296 | }
297 |
298 | let days = null;
299 | if(this.state.mobilView){
300 | days = this.renderMobilView(weekdays)
301 | }else{
302 | days = this.renderDesktopView(weekdays)
303 | }
304 | return(
305 |
306 |
307 |
308 | {days}
309 |