0

こんにちは、テキストボックスにデータを入力し、カレンダーの日付をクリックして送信することで、カレンダーにイベントを追加できるようにしようと考えています (現時点では日付ピッカーを使用)。イベントを強調表示して、日付をクリックすると (イベントが表示されている場合)、イベントがポップアップ表示されます。

検索しようとしましたが、運がありませんでした。

ありがとうございました

EDIT：コードを少し変更して、適切にコンパイルしました

また、データを記録するために使用できるように、選択した日付を参照したいと思います。このプログラムを使用するには、値を入力して更新を押すだけで、新しい値が 5 月 13 日に読み込まれます。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery &amp; jQueryUI Base - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">





      <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>


  <style type='text/css'>
    table.ui-datepicker-calendar tbody td.highlight > a {
    background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
    color: #363636;
    border: 1px solid #FFDE2E;
}

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var events = [ 
    { Title: "Equipment: " + equip + "\nSize: " + size, Date: new Date("05/13/2013") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") }
];



$("div").datepicker({
    beforeShowDay: function(date) {
        var result = [true, '', null];
        var matching = $.grep(events, function(event) {
            return event.Date.valueOf() === date.valueOf();
        });

        if (matching.length) {
            result = [true, 'highlight', null];
        }
        return result;
    },
    onSelect: function(dateText) {
        var date,
            selectedDate = new Date(dateText),
            i = 0,
            event = null;

        while (i < events.length && !event) {
            date = events[i].Date;

            if (selectedDate.valueOf() === date.valueOf()) {
                event = events[i];
            }
            i++;
        }
        if (event) {
            alert(event.Title);
        }
    }
});
});//]]>
addLow()

</script>


</head>
<body>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='radio' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
  <div></div>
<button type="button" onclick="addLow()">Add Lowering Event</button><br>

</body>


</html>
4

0 に答える 0