JSFiddle - React, Tailwind, and code Playground

by peretc001

HTML

<link rel="stylesheet" href="https://nazar-pc.github.io/PickMeUp/demo/demo.css">
<script src="https://nazar-pc.github.io/PickMeUp/js/pickmeup.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="https://github.com/nazar-pc/PickMeUp">GitHub repository</a>
<section>
	<article>
		<div class="clndr"></div>
	</article>
</section>
<div class="select"></div>
<div class="spec">
				<button id="work" class="button button-primary">Рабочая неделя</button>
				<button id="week" class="button button-primary">Выходные</button>
			</div>
      <br><br>

CSS

.pickmeup{border-radius:.4em;margin:0 auto;padding:2rem 0;font-size:1.8rem;text-align:center;display:inline-block;}
.pickmeup *{-moz-box-sizing:border-box;box-sizing:border-box;}
.pickmeup.pmu-flat{width:100%;margin:0 auto;}
.pickmeup.pmu-hidden{display:none}
.pickmeup .pmu-instance{font-family:Roboto;font-weight:300;display:inline-block;height:13.8em;padding:0.5em;text-align:center;width:15em;margin:0 auto;-webkit-tap-highlight-color: transparent;}
/* текущий месяц */
.pickmeup .pmu-instance .pmu-button{color:#151515;cursor:pointer;outline:none;text-decoration:none;-webkit-tap-highlight-color: transparent;}
.pickmeup .pmu-instance .pmu-today{border:1px solid #ff2400;}

.pickmeup .pmu-instance .pmu-not-in-month{color:#ccc;font-weight:300;}
.pickmeup .pmu-instance .pmu-disabled, .pickmeup .pmu-instance .pmu-disabled:hover{color:#ccc;cursor:default}
.pickmeup .pmu-instance .pmu-selected{background:#151515;color:#eee;}
.pickmeup .pmu-instance .pmu-not-in-month.pmu-selected{background:#151515;color:#eee;}
.pickmeup .pmu-instance nav{color:#eee;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:2em}
.pickmeup .pmu-instance nav *:first-child :hover{color:#88c5eb}
.pickmeup .pmu-instance nav .pmu-prev,.pickmeup .pmu-instance nav .pmu-next{display:none;height:2em;width:1em}
.pickmeup .pmu-instance nav .pmu-month{width:14em;cursor:default;font-weight:300;}
.pickmeup .pmu-instance .pmu-years *,.pickmeup .pmu-instance .pmu-months *{display:inline-block;line-height:3.6em;width:3.5em;}
.pickmeup .pmu-instance .pmu-day-of-week{color:#999;cursor:default;cursor:default;font-weight:300;}
.pickmeup .pmu-instance .pmu-day-of-week *,.pickmeup .pmu-instance .pmu-days *{display:inline-block;line-height:1.5em;width:2em}
.pickmeup .pmu-instance .pmu-day-of-week *{line-height:1.8em}
.pickmeup .pmu-instance:first-child .pmu-prev,.pickmeup .pmu-instance:last-child .pmu-next{display:block}
.pickmeup .pmu-instance:first-child .pmu-month,.pickmeup .pmu-instance:last-child...

JavaScript

$(function () {
	pickmeup('.clndr', {
		flat      : true,
		date      : new Date,
		mode      : 'range',
		calendars : 1,
		format: 'd.m.Y',
		separator: '-',
    	min : new Date(),
    	select_month :false,
        select_year  : false
    });    
	var today = new Date();
	var monday = new Date();
	var tuesday = new Date();
	var wednesday = new Date();
	var thursday = new Date();
	var friday = new Date();
	var saturday = new Date();
	var sunday = new Date();
	// Задаем следующий Пн
	if(today.getDay()){monday.setDate(today.getDate() + 8 - today.getDay())} else {monday.setDate(today.getDate() + 1)}
	// Задаем остальные дни относительно Пн
	tuesday.setDate(monday.getDate() + 1);
	wednesday.setDate(monday.getDate() + 2);
	thursday.setDate(monday.getDate() + 3);
	friday.setDate(monday.getDate() + 4);
	saturday.setDate(monday.getDate() + 5);
	sunday.setDate(monday.getDate() + 6);
		
	var this_monday = new Date();
	var this_saturday = new Date();
	var this_sunday = new Date();
	if(today.getDay()){this_monday.setDate(today.getDate() + 1 - today.getDay())}
	this_saturday.setDate(this_monday.getDate() + 5);
	this_sunday.setDate(this_monday.getDate() + 6);
	
	
	$('#work').on('click', function (e) {
		pickmeup('.clndr').set_date([monday,tuesday,wednesday,thursday,friday]);
	
		$('.select').html([monday,tuesday,wednesday,thursday,friday]);
    $('.day').html('Рабочая неделя');
		$('.sum').html('<?php echo $prwork = ($price*0.9)/24*102; ?>');
	});
	$('#week').on('click', function (e) {
		if (today.getDay() == 0 || today.getDay() == 6) // если сегодня Сб или Вс
		{
			 pickmeup('.clndr').set_date([saturday,sunday]);
			}
		else { pickmeup('.clndr').set_date([this_saturday,this_sunday]); }
		
		$('.day').html('Выходные');
		$('.sum').html('<?php echo $prweek = $price/24*66; ?>');
	});
});