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