calendar fixes
This commit is contained in:
medet97
parent
ab0f855831
commit
9e7b37064c
|
|
@ -0,0 +1,140 @@
|
|||
@font-face {
|
||||
src: url(../web/open-sans/regular.ttf);
|
||||
font-family: 'Open-Sans-Regular';
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Open-Sans-Regular';
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 15px auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.container-calendar {
|
||||
padding: 15px;
|
||||
max-width: 475px;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.button-container-calendar button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
zoom: 1.5;
|
||||
background: #00a2b7;
|
||||
color: #fff;
|
||||
border: 1px solid #0aa2b5;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
top: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.table-calendar {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-top: 1px solid lightblue;
|
||||
}
|
||||
|
||||
.table-calendar td, .table-calendar th {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#monthHeader {
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 24pt;
|
||||
}
|
||||
|
||||
#yearHeader {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 3px;
|
||||
font-size: 12pt;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-picker.selected {
|
||||
font-weight: bold;
|
||||
outline: 1px solid #00BCD4;
|
||||
}
|
||||
|
||||
.date-picker.selected span {
|
||||
color: #00BCD4;
|
||||
}
|
||||
|
||||
/* sunday */
|
||||
.date-picker:nth-child(1), .red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* friday */
|
||||
.date-picker:nth-child(6) {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#monthAndYear {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.button-container-calendar {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#previous {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.footer-container-calendar {
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid #dadada;
|
||||
padding: 10px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-container-calendar select {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
background: #ffffff;
|
||||
color: #585858;
|
||||
border: 1px solid #bfc5c5;
|
||||
border-radius: 3px;
|
||||
padding: 5px 1em;
|
||||
}
|
||||
|
||||
#date-picked {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
border-top: 1px solid lightblue;
|
||||
padding-top: 15px;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
var today = new Date();
|
||||
var currentMonth = today.getMonth();
|
||||
var currentYear = today.getFullYear();
|
||||
var selectYear = document.getElementById("year");
|
||||
var selectMonth = document.getElementById("month");
|
||||
var monthHeader = document.getElementById("monthHeader");
|
||||
var yearHeader = document.getElementById("yearHeader");
|
||||
var nextBtn = document.getElementById("next");
|
||||
var previousBtn = document.getElementById("previous");
|
||||
var datePicked = document.getElementById("date-picked");
|
||||
var months = "";
|
||||
var days = "";
|
||||
var monthsArr = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var daysArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
months = monthsArr;
|
||||
days = daysArr;
|
||||
|
||||
var tableHeaderMonth = document.getElementById("thead-month");
|
||||
var dataHead = "<tr>";
|
||||
var startDay = "";
|
||||
|
||||
for (dhead in days) {
|
||||
days[dhead] === "Sun" ? startDay = "red-text" : startDay = "";
|
||||
dataHead += "<th data-days='" + days[dhead] + "' class='" + startDay + "'>" + days[dhead] + "</th>";
|
||||
}
|
||||
|
||||
dataHead += "</tr>";
|
||||
tableHeaderMonth.innerHTML = dataHead;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
|
||||
nextBtn.addEventListener("click", next, false);
|
||||
previousBtn.addEventListener("click", previous, false);
|
||||
|
||||
function yearRange(start, end) {
|
||||
var years = "";
|
||||
|
||||
for (var year = start; year <= end; year++) {
|
||||
years += "<option value='" + year + "'>" + year + "</option>";
|
||||
}
|
||||
|
||||
return years;
|
||||
}
|
||||
|
||||
var createYear = yearRange(1970, 2050);
|
||||
selectYear.innerHTML = createYear;
|
||||
|
||||
function next() {
|
||||
currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
|
||||
currentMonth = (currentMonth + 1) % 12;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function previous() {
|
||||
currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
|
||||
currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function jump() {
|
||||
currentYear = parseInt(selectYear.value);
|
||||
currentMonth = parseInt(selectMonth.value);
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function showCalendar(month, year) {
|
||||
var firstDay = new Date(year, month).getDay();
|
||||
var monthString = monthsArr[month];
|
||||
|
||||
table = document.getElementById("calendar-body");
|
||||
table.innerHTML = "";
|
||||
monthHeader.innerHTML = monthString.substring(0, 3);
|
||||
yearHeader.innerHTML = year;
|
||||
selectYear.value = year;
|
||||
selectMonth.value = month;
|
||||
|
||||
var date = 1;
|
||||
|
||||
for (var i = 0; i < 6; i++ ) {
|
||||
var row = document.createElement("tr");
|
||||
|
||||
for (var j = 0; j < 7; j++) {
|
||||
if (i === 0 && j < firstDay) {
|
||||
cell = document.createElement("td");
|
||||
cellText = document.createTextNode("");
|
||||
cell.appendChild(cellText);
|
||||
row.appendChild(cell);
|
||||
} else if (date > daysInMonth(month, year)) {
|
||||
break;
|
||||
} else {
|
||||
cell = document.createElement("td");
|
||||
cell.setAttribute("data-date", date);
|
||||
cell.setAttribute("data-month", month + 1);
|
||||
cell.setAttribute("data-year", year);
|
||||
cell.setAttribute("data-month-name", months[month]);
|
||||
cell.className = "date-picker";
|
||||
cell.innerHTML = "<span>" + date + "</span>";
|
||||
cell.onclick = function(event) {
|
||||
var dates = document.querySelectorAll(".date-picker");
|
||||
var currentTarget = event.currentTarget;
|
||||
var date = currentTarget.dataset.date;
|
||||
var month = currentTarget.dataset.month - 1;
|
||||
var year = currentTarget.dataset.year;
|
||||
|
||||
for (var i = 0; i < dates.length; i++) {
|
||||
dates[i].classList.remove("selected");
|
||||
}
|
||||
|
||||
currentTarget.classList.add("selected");
|
||||
datePicked.innerHTML = date + " " + monthsArr[month] + " " + year;
|
||||
}
|
||||
|
||||
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
|
||||
cell.className = "date-picker selected";
|
||||
}
|
||||
|
||||
row.appendChild(cell);
|
||||
date++;
|
||||
}
|
||||
}
|
||||
|
||||
table.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function daysInMonth(month, year) {
|
||||
return 32 - new Date(year, month, 32).getDate();
|
||||
}
|
||||
Binary file not shown.
|
|
@ -16,11 +16,43 @@
|
|||
</li>
|
||||
|
||||
<li class="nav-item dropdown" style="position: relative; margin-left: -20px;">
|
||||
<form action="{{$category->url}}" method="post" class="calendar-form ">
|
||||
@csrf
|
||||
{{--<form action="{{$category->url}}" method="post" class="calendar-form ">--}}
|
||||
{{--@csrf--}}
|
||||
{{--<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="tab">Дата <i class="fa fa-caret-down"></i></a>--}}
|
||||
<input id="datepicker" placeholder="{{__('ClientSide.select')}}" name="date"/>
|
||||
</form>
|
||||
{{--<input id="datepicker" placeholder="{{__('ClientSide.select')}}" name="date"/>--}}
|
||||
{{--</form>--}}
|
||||
<div class="container-calendar">
|
||||
<div class="button-container-calendar">
|
||||
<button id="previous">‹</button>
|
||||
<button id="next">›</button>
|
||||
<h3 id="monthHeader"></h3>
|
||||
<p id="yearHeader"></p>
|
||||
</div>
|
||||
|
||||
<table class="table-calendar" id="calendar">
|
||||
<thead id="thead-month"></thead>
|
||||
<tbody id="calendar-body"></tbody>
|
||||
</table>
|
||||
|
||||
<div class="footer-container-calendar">
|
||||
<label for="month">Jump To: </label>
|
||||
<select id="month">
|
||||
<option value=0>Jan</option>
|
||||
<option value=1>Feb</option>
|
||||
<option value=2>Mar</option>
|
||||
<option value=3>Apr</option>
|
||||
<option value=4>May</option>
|
||||
<option value=5>Jun</option>
|
||||
<option value=6>Jul</option>
|
||||
<option value=7>Aug</option>
|
||||
<option value=8>Sep</option>
|
||||
<option value=9>Oct</option>
|
||||
<option value=10>Nov</option>
|
||||
<option value=11>Dec</option>
|
||||
</select>
|
||||
<select id="year"></select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@extends("desktop.Layouts.EventsLayout")
|
||||
|
||||
@push('after_styles')
|
||||
<link rel="stylesheet" href="{{ asset('vendor/css/date-picker.css') }}" />
|
||||
<script src="{{ asset('vendor/js/date-picker.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
{{\DaveJamesMiller\Breadcrumbs\Facades\Breadcrumbs::render('category',$category)}}
|
||||
@include("Shared.Partials.FilterMenu")
|
||||
|
|
@ -41,13 +47,15 @@
|
|||
@endsection
|
||||
|
||||
@section('after_scripts')
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
$( function() {
|
||||
$("#datepicker").datepicker();
|
||||
} );
|
||||
</script>
|
||||
{{--<script src="{{asset('vendor/gijgo/gijgo.min.js')}}" type="text/javascript"></script>--}}
|
||||
{{--<script>--}}
|
||||
{{--$('#datepicker').datepicker({--}}
|
||||
{{--uiLibrary: 'bootstrap4',--}}
|
||||
{{--icons: {--}}
|
||||
{{--rightIcon: '{{__("ClientSide.date")}} <i class="fa fa-caret-down"></i>'--}}
|
||||
{{--}--}}
|
||||
{{--});--}}
|
||||
|
||||
{{--</script>--}}
|
||||
|
||||
@endsection
|
||||
Loading…
Reference in New Issue