Javascript 有没有办法创造一个；“弹出窗口”；使用jQuery在日历中创建事件？
我正在创建一个日历，以便不同团队的成员可以根据他们所在的团队创建活动。我需要它的工作有点像谷歌日历。因此，当您单击日期时，将出现“创建事件”弹出窗口。弹出窗口中唯一的内容是事件的标题、时间、描述以及分配给该团队的颜色 在jQuery中一定有办法做到这一点，但我已经在jQueryUI网站上查找过了，似乎什么都找不到 下面是我为日历创建的HTML布局Javascript 有没有办法创造一个；“弹出窗口”；使用jQuery在日历中创建事件？,javascript,jquery,jquery-ui,calendar,Javascript,Jquery,Jquery Ui,Calendar,我正在创建一个日历，以便不同团队的成员可以根据他们所在的团队创建活动。我需要它的工作有点像谷歌日历。因此，当您单击日期时，将出现“创建事件”弹出窗口。弹出窗口中唯一的内容是事件的标题、时间、描述以及分配给该团队的颜色 在jQuery中一定有办法做到这一点，但我已经在jQueryUI网站上查找过了，似乎什么都找不到 下面是我为日历创建的HTML布局 <!DOCTYPE html> <html> <head> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eTeam Leader Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
</head>
<body>
<div id="cal">
<div class="header">
<span class="left button" id="prev"> ⟨ </span>
<span class="left hook"></span>
<span class="month-year" id="label"> January 2017 </span>
<span class="right hook"></span>
<span class="right button" id="next"> ⟩ </span>
</div>
<table id="days">
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr><td class="today">1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>29</td><td>30</td><td>31</td><td class="nil"></td><td class="nil"></td><td class="nil"></td><td class="nil"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
由于您没有提供JavaScript示例或您当前的任何尝试，我建议您查看以下示例： 下面是一个如何使用它的示例： 添加了HTML
<div id="newEvent" title="New Event">
<form>
<label for="newEventTitle">Event Title</label>
<input type="text" id="newEventTitle" class="text ui-widget-content ui-corner-all" />
<label for="newEventTime">Event Time</label>
<input type="text" id="newEventTime" class="text ui-widget-content ui-corner-all" />
<label for="newEventDesc">Event Description</label>
<input type="text" id="newEventDesc" class="text ui-widget-content ui-corner-all" />
<label for="newEventTeam">Team</label>
<input type="text" id="newEventTeam" class="text ui-widget-content ui-corner-all" />
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</form>
</div>
#newEvent label,
#newEvent input {
display: block;
}
#newEvent input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
$(function() {
function checkLength(o, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
function addEvent(d) {
var valid = true;
$("#newEvent input").removeClass("ui-state-error");
valid = valid && checkLength($("#newEventTitle"), 3, 80);
if (valid) {
$.ajax({
url: "newEvent.php",
type: "POST",
data: {
eventName: $("#newEventTitle").val(),
eventDate: d,
eventTime: $("#newEventTime").val(),
eventDesc: $("#newEventDesc").val(),
eventColor: $("#newEventTeam").val()
},
success: function(resp) {
// Response may contain an Event ID that could be added to the calendar
$(".selected-day").removeClass("selected-day");
}
});
}
return valid;
}
var $popup = $("#newEvent").dialog({
autoOpen: false,
modal: true,
buttons: {
"Create Event": function() {
addEvent($(".selected-day").html());
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#newEvent form")[0].reset();
$("#newEvent form input").removeClass("ui-state-error");
$(this).dialog("option", "title", "New Event");
}
});
$("#newEvent form").submit(function(e) {
e.preventDefault();
addUser($(".selected-day").html());
});
$("#cal-frame td").click(function(e) {
var day = parseInt($(this).html());
$(this).addClass("selected-day");
var month = $("#cal .month-year").html();
var title = $popup.dialog("option", "title") + " for " + day + month;
$popup.dialog("option", "title", title);
$popup.dialog("open");
});
});
$（函数（）{
功能检查长度（o、最小值、最大值）{
如果（o.val（）.length>max | | o.val（）.length这只是一种方法，还有其他方法 通常，您应该在每个单元格上创建一些标识符，以便知道用户单击的日期，然后将该值读取并传递到函数中，以设置用户正在创建的事件的日期。例如，每个可单击的日单元格可以有一个已定义的类（如“日”）以及一些数据-*属性（如20170101=2017年1月1日）。然后，您将为日单元格（
$（'.Day'）创建一个单击处理程序。单击（函数（）{//get data-*attribute with date}）单击，然后启动对话框或工具提示。正如@Stevangelista提到的，您可以添加数据属性或id
，以帮助在对话框中创建表单。样式更“谷歌化”比如：
$(function() {
function checkLength(o, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
function addEvent(d) {
var valid = true;
$("#newEvent input").removeClass("ui-state-error");
valid = valid && checkLength($("#newEventTitle"), 3, 80);
if (valid) {
$.ajax({
url: "newEvent.php",
type: "POST",
data: {
eventName: $("#newEventTitle").val(),
eventDate: d,
eventTime: $("#newEventTime").val(),
eventDesc: $("#newEventDesc").val(),
eventColor: $("#newEventTeam").val()
},
success: function(resp) {
// Response may contain an Event ID that could be added to the calendar
$(".selected-day").removeClass("selected-day");
}
});
}
return valid;
}
var $popup = $("#newEvent").dialog({
autoOpen: false,
modal: true,
buttons: {
"Create Event": function() {
addEvent($(".selected-day").html());
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#newEvent form")[0].reset();
$("#newEvent form input").removeClass("ui-state-error");
$(this).dialog("option", "title", "New Event");
}
});
$("#newEvent form").submit(function(e) {
e.preventDefault();
addUser($(".selected-day").html());
});
$("#cal-frame td").click(function(e) {
var day = parseInt($(this).html());
$(this).addClass("selected-day");
var month = $("#cal .month-year").html();
var title = $popup.dialog("option", "title") + " for " + day + month;
$popup.dialog("option", "title", title);
$popup.dialog("open");
});
});