如何将事件添加到日历

时间：2019-06-14 15:59:47

标签： jquery html calendar

我遇到的问题是我无法弄清楚如何在不手动将事件输入到日历的情况下添加事件。我希望有一个“创建事件”按钮，您可以在其中输入事件信息，一旦用户单击“提交”按钮，它将把事件上载到相应的日期，即使刷新或不在页面后也保留在日历上

以下是日历：

$(document).ready(function(){

var CURRENT_DATE = new Date();
var d = new Date();
var count = 0;

var content = 'January February March April May June July August September October November December'.split(' ');
var weekDayName = 'SUN MON TUES WED THURS FRI'.split(' ');
var daysOfMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var eventDates = ['05/12/2019','05/19/2019','05/28/2019'];

// Returns the day of week which month starts (eg 0 for Sunday, 1 for Monday, etc.)
function getCalendarStart(dayOfWeek, currentDate) {
  var date = currentDate - 1;
  var startOffset = (date % 7) - dayOfWeek;
  if (startOffset > 0) {
  startOffset -= 7;
  }

  return Math.abs(startOffset);
}

// Render Calendar
function renderCalendar(startDay, totalDays, currentDate) {
  var currentRow = 1;
  var currentDay = startDay;
  var $table = $('table');
  var $week = getCalendarRow();
  var $day;

  var ThisMonth = new Date().getMonth();
  var ThisDay = new Date().getDate();
  var ThisYear = new Date().getFullYear();


  for (var i = 1; i <= totalDays; i++) {
  $day = $week.find('td').eq(currentDay);
  $day.text(i);

  if (i === currentDate) {
    if( i <= '9'){
      $day.addClass('today').append("<div class='circle1'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
    }else if(i >= '10' && i < '20'){
      $day.addClass('today').append("<div class='circle2'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
    }else{
      $day.addClass('today').append("<div class='circle3'><div style='position: relative; height: 56px;'>&nbsp;</div></div>");
    }
  }

  if(i != currentDate){
    $day.addClass('not-today' + i);
    var dayHovered = $day;
    if( i <= '9'){
      dayHovered.hover(function(e){
        var id = e.target.id;
        $(this).append("<div class='circle4'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
        }, function(){
          $(this).find( "div" ).remove();
          $(this).removeAttr("style");
        });
    }else if(i >= '10' && i < '20'){
      dayHovered.hover(function(){
        $(this).append("<div class='circle5'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
        }, function(){
          $(this).find( "div" ).remove();
          $(this).removeAttr("style");
        });
    }else{
      dayHovered.hover(function(){
        $(this).append("<div class='circle6'><div style='position: relative; height: 56px;'>&nbsp;</div></div>").css("color","white");
        }, function(){
          $(this).find( "div" ).remove();
          $(this).removeAttr("style");
        });
    }
  }

  // +1 next day until Saturday (6), then reset to Sunday (0)
  currentDay = ++currentDay % 7;

  // Generate new row when day is Saturday, but only if there are
  // additional days to render
  if (currentDay === 0 && (i + 1 <= totalDays)) {
    $week = getCalendarRow();
    currentRow++;
  }
  }
}

/*function getActualDate() {
  //var ThisMonth = new Date().getMonth() + 1;
  var ThisMonth = new Date().getMonth();
      var ThisDay = new Date().getDate();
      var ThisYear = new Date().getFullYear();
      var ThisDate = ThisMonth.toString() + "/" + ThisDay.toString() + "/" + ThisYear.toString();

  return ThisDate;
}*/

// Clear generated calendar
function clearCalendar() {
  var $trs = $('tr').not(':eq(0)');
  $trs.remove();
  $('.month-year').empty();
}

// Generates table row used when rendering Calendar
function getCalendarRow() {
  var $table = $('table');
  var $tr = $('<tr/>');
  for (var i = 0, len = 7; i < len; i++) {
  $tr.append($('<td/>'));
  }
  $table.append($tr);
  return $tr;
}

function myCalendar() {
  var month = d.getUTCMonth();
  var day = d.getUTCDay();
  var year = d.getUTCFullYear();
  var date = d.getUTCDate();
  var totalDaysOfMonth = daysOfMonth[month];
  var counter = 1;

  var $h2 = $('<h2>');

  $h2.text(content[month] + ' ' + year);
  $h2.appendTo('.month-year');

  var dateToHighlight = 0;

  // Determine if Month && Year are current for Date Highlight
  if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCFullYear() === year) {
  dateToHighlight = date;
  }

  //Getting February Days Including The Leap Year
  if (month === 1) {
  if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
    totalDaysOfMonth = 29;
  }
  }

  // Get Start Day
  renderCalendar(getCalendarStart(day, date), totalDaysOfMonth, dateToHighlight);

  //Today Button
  if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCFullYear() === year) {
    $("#todayButton").prop('disabled',true).css({"cursor":"no-drop", "background-color":"white"});
  }else{
    $("#todayButton").prop('disabled',false).css({"cursor":"pointer", "background-color":"white"});
  }
};

function navigationHandler(dir) {
  d.setUTCMonth(d.getUTCMonth() + dir);
  clearCalendar();
  myCalendar();

}

$(document).ready(function() {
  // Bind Events
  $('.prev-month').click(function() {
  navigationHandler(-1);
  });

  $('.next-month').click(function() {
  navigationHandler(1);
  });

  $("#todayButton").click(function() {
    var currentMonth = CURRENT_DATE.getUTCMonth(), currentYear = CURRENT_DATE.getUTCFullYear();

    var monthOn = d.getUTCMonth(), yearOn = d.getUTCFullYear();

    if(currentMonth === 0 || monthOn === 0){
      currentMonth++;
      monthOn++;
    }
    var numberOfMonths = (yearOn - currentYear) * 12 + (monthOn - currentMonth);

    navigationHandler(numberOfMonths * -1);
  });

  // Generate Calendar
  myCalendar();
});
});

//Create Event Functionality - Phase 2
$(document).ready(function() {
	$('#create-event').on('click', function(){
		$('#newEvent').dialog({
			modal:true,
			buttons: [{
				"text":'Create',
				"class": 'button-color',
				click: function(){
					$(this).dialog('close');
				}
			},
			{
				"text":'Cancel',
				click: function(){
					$(this).dialog('close');
				}
			}]
		});
	});
});
/******************Calendar CSS**********************/
.container {
	max-width: 100% !important;
	margin-top: 30px !important;
	border: 1px solid lightgrey !important;
	border-radius: 5px !important;
	-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1) !important;
	-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1) !important;
	box-shadow: -2px 2px 10px rgba(98, 150, 187, 1) !important;
	text-align: center;
	margin-bottom: 30px !important;
}

th {
	height: 20px !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	background-color: #6296bb !important;
	color: white !important;
}

td {
	height: 100px !important;
	text-align: right !important;
	font-size: 16px !important;
}

.today {
	/*background-color: gray;*/
	color: white !important;
}

td:nth-of-type(7), td:nth-of-type(7) {
	background: #e0f9e7 !important;
	
}

td:nth-of-type(1), td:nth-of-type(1) {
	background: #e0f9e7 !important;
}

th:nth-of-type(7), td:nth-of-type(7) {
	font-weight: bold !important;
	
}

th:nth-of-type(1), td:nth-of-type(1) {
	font-weight: bold !important;
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
	border: 1px solid darkturquoise !important;
}

.arrowRight{
	float:right !important;
	/*border: 1px solid #a7cb45!important;
	margin-right: 10px!important;*/
	width: 80px !important;
	height: 42px !important;
	/*-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1)!important;
	-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1)!important;
	box-shadow: -2px 2px 10px rgba(98, 150, 187, 1)!important;*/
}

.arrowLeft{
	float:left !important;
	/*border: 1px solid #a7cb45!important;
	margin-left: 100px!important;*/
	width: 80px !important;
	height: 42px !important;
	/*-webkit-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1)!important;
	-moz-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1)!important;
	box-shadow: 2px 2px 10px rgba(98, 150, 187, 1)!important;*/
}

.fa-chevron-left, .fa-chevron-right{
	color: #a7cb45 !important;
	text-align: center !important; 
	margin-top: 15px !important;
	cursor: pointer !important;
	text-shadow: 3px 3px 16px #6296bb !important;
}

.fa-chevron-left:hover, .fa-chevron-right:hover{
	color: #f4f9fc !important;
}

/***********If there are Events***********/
.ring-container {
	position: relative !important;
}

.circle {
	width: 15px !important;
	height: 15px !important;
	background-color: #62bd19 !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 23px !important;
	left: 23px !important;
}

.ringring {
	border: 3px solid #62bd19 !important;
	-webkit-border-radius: 30px !important;
	height: 25px !important;
	width: 25px !important;
	position: absolute !important;
	left: 15px !important;
	top: 15px !important;
	-webkit-animation: pulsate 1s ease-out !important;
	-webkit-animation-iteration-count: infinite !important; 
	opacity: 0.0
}

@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1) !important; opacity: 0.0 !important;}
	50% {opacity: 1.0 !important;}
	100% {-webkit-transform: scale(1.2, 1.2) !important; opacity: 0.0 !important;}
}
/**********************************************/

.circle1{
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -20px !important;
	background-color: #a7cb45 !important;
	/*opacity: .4!important;
	*/border-radius: 50% !important;
	float: right !important;
}

.circle2{
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -23px !important;
	background-color: #a7cb45 !important;
	/*opacity: .4 !important;
	*/border-radius: 50% !important;
	float: right !important;
}

.circle3{
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -24px !important;
	background-color: #a7cb45 !important;
	/*opacity: .4 !important;
	*/border-radius: 50% !important;
	float: right !important;
}

.circle4{
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -20px !important;
	background-color: #BBD2E2 !important;
	/*opacity: .4 !important;
	*/border-radius: 50% !important;
	float: right !important;
}

.circle5 {
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -23px !important;
	background-color: #BBD2E2 !important;
	/*opacity: .4 !important;
	*/border-radius: 50% !important;
	float: right !important;
}

.circle6 {
	font-size: 15px !important;
	margin: -5px !important;
	min-width: 19px !important;
	padding: 10px !important;
	text-align: center !important;
	width: 30px !important;
	height: 30px !important;
	margin-left: -24px !important;
	background-color: #BBD2E2 !important;
	/*opacity: .4 !important;
	*/border-radius: 50% !important;
	float: right !important;
}

#todayButton{
	float: right !important;
	margin-top: 25px !important;
	/*margin-right: 50px !important;*/
	padding: 1px 14px !important;
	border: 1px solid #6296bb !important;
	border-radius: 5px !important;
	font-size: 18px !important;
	text-shadow: 3px 3px 16px #6296bb !important;
	filter: dropshadow(color=#6296bb, offx=1, offy=1);/* IE Proprietary Filter*/
	/*cursor: pointer !important;*/
}

/*========== Pulse Animation ===========*/
.pulse {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #cca92c !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4) !important;
  animation: pulse 2s infinite !important;
  float:left !important;
  margin-top: 25px !important;
}
.pulse:hover {
  animation: none !important;
}

@-webkit-keyframes pulse {
  0% {
	-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4) !important;
  }
  70% {
	  -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0) !important;
  }
  100% {
	  -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0) !important;
  }
}
@keyframes pulse {
  0% {
	-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4) !important;
	box-shadow: 0 0 0 0 rgba(204,169,44, 0.4) !important;
  }
  70% {
	  -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0) !important;
	  box-shadow: 0 0 0 10px rgba(204,169,44, 0) !important;
  }
  100% {
	  -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0) !important;
	  box-shadow: 0 0 0 0 rgba(204,169,44, 0) !important;
  }
}
/*======================================*/

.eventText{
	font-size: 10px !important;
	color: #6296bb !important;
	float: left !important;
	width: 97% !important;
	margin-top: -12px !important;
	margin-left: 12px !important;
	padding-right: 5px !important;
}
    	<!--- Font-awesome icons --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--- CSS Styling --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css">
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />

<!--- JQuery --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="container">
    <i class="prev-month fa fa-chevron-left fa-3x arrowLeft"></i>
    <i class="next-month fa fa-chevron-right fa-3x arrowRight"></i>
    <button id="todayButton">Today</button>
    <div class="month-year text-center" style="margin-bottom:22px">
        <h2></h2>
    </div>
    <table class="table table-bordered">
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </table>
</div>
<div style="text-align:center; margin-left:120px; margin-bottom:15px">
    <button id="create-event">Create Event</button>
</div>

0 个答案:

没有答案
相关问题
最新问题