iT邦幫忙

0

如何在月曆上click時新增事件 填寫完顯示在那天上?(事件是用跳出來的modal)

想請問大大們~我想在日曆上新增事件 但我目前事件只是用連結而已
想問大家怎麼改成直接跳出來不用透過連結? 還有也不太知道如何讓事件顯示在想要那天上面? 拜託大家幫幫我 我是初學者 這個月曆是網路上公開的code
網路上有找很多資料了 但還是看不太懂/images/emoticon/emoticon02.gif

這是日曆html

}}

    </td>
  </tr>
</thead>
{{ if (mode ==='year') {
  month = 0;
}}
<tbody>
  {{ for (j = 0; j < 3; j++) { }}
  <tr>
    {{ for (i = 0; i < 4; i++) { }}
    <td class="calendar-month month-{{:month}} js-cal-option" data-date="{{: new Date(year, month, 1).toISOString() }}" data-mode="month">
      {{: months[month] }}
      {{ month++;}}
    </td>
    {{ } }}
  </tr>
  {{ } }}
</tbody>
{{ } }}
{{ if (mode ==='month' || mode ==='week') { }}
<thead>
  <tr class="c-weeks">
    {{ for (i = 0; i < 7; i++) { }}
      <th class="c-name">
        {{: days[i] }}
      </th>
    {{ } }}
  </tr>
</thead>
<tbody>
  {{ for (j = 0; j < 6 && (j < 1 || mode === 'month'); j++) { }}
  <tr>
    {{ for (i = 0; i < 7; i++) { }}
    {{ if (thedate > last) { dayclass = nextmonthcss; } else if (thedate >= first) { dayclass = thismonthcss; } }}
    
    
    <td class="calendar-day {{: dayclass }} {{: thedate.toDateCssClass() }} {{: date.toDateCssClass() === thedate.toDateCssClass() ? 'selected':'' }} {{: daycss[i] }} js-cal-option" data-date="{{: thedate.toISOString() }}" >
    <a href="add_event/add_event.html">
      
      <div class="date">{{: thedate.getDate() }}</div>

      {{ thedate.setDate(thedate.getDate() + 1);}}
      </a>
    </td>
    {{ } }}
  </tr>
  {{ } }}
</tbody>
{{ } }}
{{ if (mode ==='day') { }}
<tbody>
  <tr>
    <td colspan="7">
      <table class="table table-striped table-condensed table-tight-vert" >
        <thead>
          <tr>
            <th> </th>
            <th style="text-align: center; width: 100%">{{: days[date.getDay()] }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="timetitle" >All Day</th>
            <td class="{{: date.toDateCssClass() }}">  </td>
          </tr>
          <tr>
            <th class="timetitle" >Before 6 AM</th>
            <td class="time-0-0"> </td>
          </tr>
          {{for (i = 6; i < 22; i++) { }}
          <tr>
            <th class="timetitle" >{{: i <= 12 ? i : i - 12 }} {{: i < 12 ? "AM" : "PM"}}</th>
            <td class="time-{{: i}}-0"> </td>
          </tr>
          <tr>
            <th class="timetitle" >{{: i <= 12 ? i : i - 12 }}:30 {{: i < 12 ? "AM" : "PM"}}</th>
            <td class="time-{{: i}}-30"> </td>
          </tr>
          {{ } }}
          <tr>
            <th class="timetitle" >After 10 PM</th>
            <td class="time-22-0"> </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>
{{ } }}

這是新增事件html

    $('#example_2').timepicker({});
   
});
</script>
    <div class="containe">

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-inf btn-lg" data-toggle="modal" data-target="#myModal">Add NEw EVENT</button>
          
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">
              
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    
                  </div>
                  <div class="modal-body" style="height:400px;overflow:scroll">
                          <table id="table" style="line-height:25px;">  <!---->
                                    <tbody align="right">
                                        <tr>
                                            <td height="70"><input type="text" style="background-image:url(輸入區_1.png);background-size: 100% 100%;border-radius: 5px; width: 45%;"></td>
                                        </tr>
                                        <tr>
                                            <td height="70"><input type="text" id="example_2" style="background-image:url(輸入區_1.png);background-size: 100% 100%;border-radius: 5px; width: 45%;"/></td>
                                        </tr>
                                        <tr>
                                            <td height="70"><input type="text" style="background-image:url(輸入區_1.png);background-size: 100% 100%;border-radius: 5px; width: 45%;"></td>
                                        </tr>
                                        <tr>
                                            <td height="70"><form>
                                                    <select name="YourLocation" style="height: 40%;width: 45%;">
                                                     <option value="ten">10 mins</option>
                                                     <option value="half">30 mins</option>
                                                     <option value="one">1 hr</option>
                                                     <option value="two">2 hr</option>
                                                     <option value="three">3 hr</option>
                                                    </select>
                                                    </form></td>
                                        </tr>
                                        <tr>
                                            <td height="70"><form>
                                                    <select name="Yourgroups" style="height: 40%;width: 45%;">
                                                     <option value="ten">SD</option>
                                                     <option value="half">Family</option>
                                                    </select>
                                                    </form></td>
                                        </tr>
                                    </tbody>
                              </table>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal" style="background-image:url(update.png);background-size: 111% 122%;border-radius: 5px; width: 85px;height:35px;background-position:37% 37%;">update</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal"style="background-image:url(add.png);background-size: 110% 122%;border-radius: 5px; width: 57px;height:35px;background-position:40% 37%;">add</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal"style="background-image:url(delete.png);background-size: 111% 122%;border-radius: 5px; width: 85px;height:35px;background-position:37% 37%;">delete</button>
                  </div>
                </div>
                
              </div>
            </div>
            
          </div>
Homura iT邦新手 2 級 ‧ 2018-07-21 22:12:15 檢舉
你這是什麼元件啊?
你的程式碼看起來有前端框架...
直接說一下你用什麼日曆元件
code 的來源給一下吧~
J.L.p.E iT邦新手 5 級 ‧ 2018-07-26 10:45:53 檢舉
檔案在這
https://drive.google.com/file/d/1HC5NSoTUvWLAatCemgKO8lsLzKvQWt-0/view?usp=sharing
然後不知為何解完壓縮html檔會不見
所以我另開一個html檔連結
https://drive.google.com/file/d/1IpmlCtaFNslQGAhicKBlJHa326uWCDz7/view?usp=sharing

尚未有邦友回答

立即登入回答