diff --git a/public/vendor/simpleDP/css/date-picker.css b/public/vendor/simpleDP/css/date-picker.css new file mode 100644 index 00000000..c85a9b46 --- /dev/null +++ b/public/vendor/simpleDP/css/date-picker.css @@ -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; +} \ No newline at end of file diff --git a/public/vendor/simpleDP/js/date-picker.js b/public/vendor/simpleDP/js/date-picker.js new file mode 100644 index 00000000..430bf2ad --- /dev/null +++ b/public/vendor/simpleDP/js/date-picker.js @@ -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 = ""; +var startDay = ""; + +for (dhead in days) { + days[dhead] === "Sun" ? startDay = "red-text" : startDay = ""; + dataHead += "" + days[dhead] + ""; +} + +dataHead += ""; +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 += ""; + } + + 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 = "" + date + ""; + 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(); +} diff --git a/public/vendor/simpleDP/web/open-sans/regular.ttf b/public/vendor/simpleDP/web/open-sans/regular.ttf new file mode 100644 index 00000000..29bfd35a Binary files /dev/null and b/public/vendor/simpleDP/web/open-sans/regular.ttf differ diff --git a/resources/views/Shared/Partials/FilterMenu.blade.php b/resources/views/Shared/Partials/FilterMenu.blade.php index 3271f1e9..1b7ffb67 100644 --- a/resources/views/Shared/Partials/FilterMenu.blade.php +++ b/resources/views/Shared/Partials/FilterMenu.blade.php @@ -16,11 +16,43 @@ diff --git a/resources/views/desktop/Pages/EventsPage.blade.php b/resources/views/desktop/Pages/EventsPage.blade.php index 3ecb9d9b..9ac94dce 100644 --- a/resources/views/desktop/Pages/EventsPage.blade.php +++ b/resources/views/desktop/Pages/EventsPage.blade.php @@ -1,4 +1,10 @@ @extends("desktop.Layouts.EventsLayout") + +@push('after_styles') + + +@endpush + @section('content') {{\DaveJamesMiller\Breadcrumbs\Facades\Breadcrumbs::render('category',$category)}} @include("Shared.Partials.FilterMenu") @@ -41,13 +47,15 @@ @endsection @section('after_scripts') - - - - - + {{----}} + {{----}} + @endsection \ No newline at end of file