Question

我正在创建一个日历，因此不同团队的成员可以根据他们所在的团队创建活动。我需要它像Google日历一样工作。因此，当您点击日期时，＆＃34;创建活动＆＃34;弹出窗口会出现。弹出窗口中唯一的东西是事件的标题，时间，描述以及分配给该团队的颜色。

在jQuery中必须有一种方法可以做到这一点，但是我已经浏览了整个jQueryUI网站，我似乎无法找到任何东西。

下面是我为日历创建的HTML布局。

    <!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"> &lang; </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"> &rang; </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>

CSS：

body { 
    background: #e0e0e0; 
} 

#cal { 
    -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    margin:50px auto; 
    font: 13px/1.5 "Helvetica Neue", Helvatica, Arial, san-serif; 
    display:table;
    width:100%;
}

#cal .header { 
    cursor:default; 
    background: #FFF800; 
    background: -moz-linear-gradient(top, #FFF800, #FFF800); 
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800)); 
    height: 34px; 
    position: relative; 
    color:#000000; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    font-weight:bold; 
    text-shadow:0px -1px 0 #87260C; 
    text-transform: uppercase; 
} 
#cal .header span { 
    display:inline-block; 
    line-height:34px; 
}

#cal .header .hook { 
    width: 9px; 
    height: 28px; 
    position: absolute; 
    bottom:60%; 

} 
.right.hook { 
    right:15%; 
} 
.left.hook { 
    left: 15%; 
}

#cal .header .button { 
    width:24px; 
    text-align:center; 
    position:absolute; 
} 
#cal .header .left.button { 
    left:0; 
    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
    border-right:1px solid #000000; 
} 
#cal .header .right.button { 
    right:0; 
    top:0; 
    border-left:1px solid #000000; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-right-radius: 5px; 
} 
#cal .header .button:hover { 
    background: -moz-linear-gradient(top, #ffffff, #ffffff); 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); 
}

#cal .header .month-year { 
    letter-spacing: 1px; 
    width: 100%; 
    text-align: center; 
}

#cal table { 
    background:#fff; 
    border-collapse:collapse; 
    width:100%;

} 
#cal td { 
    color:#2b2b2b; 
    width:30px; 
    height:90px; 
    line-height:30px; 
    text-align:center; 
    border:1px solid #e6e6e6; 
    cursor:default; 

} 
#cal #days td { 
    line-height: 26px; 
    text-transform:uppercase; 
    font-size:90%; 
    color:#9e9e9e; 
} 
#cal #days td:not(:last-child) { 
    border-right:1px solid #fff; 
}

#cal #cal-frame td.today { 
    background:#d3d3d3; 
    color:black; 
    box-shadow:1px 1px 0px #fff inset; 
    -moz-box-shadow:1px 1px 0px #fff inset; 
    -webkit-box-shadow:1px 1px 0px #fff inset; 
} 
#cal #cal-frame td:not(.nil):hover { 
    color:#000000; 
    text-shadow: #FFF800 0px -1px; 
    background:#FFF800; 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800)); 
    -moz-box-shadow:0px 0px 0px; 
    -webkit-box-shadow:0px 0px 0px; 
}

#cal #cal-frame td span { 
    font-size:80%; 
    position:relative; 
} 
#cal #cal-frame td span:first-child { 
    bottom:5px; 
} 
#cal #cal-frame td span:last-child { 
    top:5px; 
}

#cal #cal-frame table.curr { 
    float:left;      
} 
#cal #cal-frame table.temp { 
    position:absolute; 
}

Answer 1

由于您没有提供JavaScript或当前任何尝试的示例，我建议您查看以下示例：http://jqueryui.com/dialog/#modal-form

以下是如何使用它的示例：https://jsfiddle.net/Twisty/8vj8qzm4/

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>

CSS已添加

#newEvent label,
#newEvent input {
  display: block;
}

#newEvent input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

<强>的jQuery

$(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");
  });
});

这只是尽我所能测试的。目前尚不清楚如何保存此事件，我假设将PHP脚本输入到数据库中。目前尚不清楚如何在日历布局上表示偶数。所以你还有很多事要做。

这只是一种方法，还有其他方法。

有没有办法创建一个＆＃34;弹出＆＃34;使用jQuery在日历中创建事件？

1 个答案: