FullcalendarでdayClickイベントを強制的に発火させるには？

以下ソースのように定義されているdayclickイベントを強制的に発火させ、dayclick:以降に記述されている関数を実行したい

dayClick: function (

条件
・発火させたい日付にはイベントがない日もある
・任意のdata-dateをセレクター選択してclick()をさせたが、効かなかった、

要はやりたいことは
クリックした時と同じようにdayclickを発火させたいということです

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
6    <title>タイトル</title>
7</head>
8<body>
9<div id="calendar"></div>
10<button type="button" id="button1">クリック</button>
11<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
13<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
14<script>
15    $(function () {
16        var dates = [
17            "2017-05-01",
18            "2017-07-01",
19        ];
20
21        function dateClick(d, a, j, v) {
22            $("#calendar").fullCalendar("clientEvents", function (e) {
23                if (moment(d).format("YYYY-MM-DD") === moment(e.start).format("YYYY-MM-DD")) {
24                    alert(e.title);
25                }
26            });
27        }
28
29        $("#calendar").fullCalendar({
30            dayClick: dateClick,
31            events: [{
32                title: "出張",
33                start: "2017-05-01",
34                color: "#92d050"
35            }, {
36                title: "出張2",
37                start: "2017-06-01",
38                color: "#92d050"
39            }, {
40                title: "出張3",
41                start: "2017-07-01",
42                color: "#92d050"
43            }]
44        });
45
46        $("#button1").on("click", function () {
47            $.each($("#calendar").fullCalendar("clientEvents"), function (i, v) {
48                date = v.start["_i"];
49                $.each(dates, function (i, v) {
50                    if (date === v) {
51                        dateClick(v);
52                    }
53                })
54            });
55        });
56    });
57</script>
58</body>
59</html>

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
6    <title>タイトル</title>
7</head>
8<body>
9<div id="calendar"></div>
10<button type="button" id="button1">クリック</button>
11<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
13<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
14<script>
15    $(function () {
16        var dates = [
17            "2017-05-03",
18            "2017-05-01",
19            "2017-07-01",
20            "2052-01-01",
21            "2017-06-01",
22            "2000-05-01",
23        ];
24
25        function dateClick(d, a, j, v) {
26            var flag = true;
27            $("#calendar").fullCalendar("clientEvents", function (e) {
28                if (moment(d).format("YYYY-MM-DD") === moment(e.start).format("YYYY-MM-DD")) {
29                    alert(e.title);
30                    flag = false;
31                }
32            });
33            if (flag) {
34                alert("イベントが設定されていない");
35            }
36        }
37
38        $("#calendar").fullCalendar({
39            dayClick: dateClick,
40            events: [{
41                title: "出張",
42                start: "2017-05-01",
43                color: "#92d050"
44            }, {
45                title: "出張2",
46                start: "2017-06-01",
47                color: "#92d050"
48            }, {
49                title: "出張3",
50                start: "2017-07-01",
51                color: "#92d050"
52            }]
53        });
54
55        $("#button1").on("click", function () {
56            $.each(dates, function (i, v) {
57                dateClick(v);
58            });
59        });
60    });
61</script>
62</body>
63</html>

投稿2017/10/14 14:29

編集2017/10/14 15:34

s8_chu

総合スコア14731

lifegoeson

2017/10/16 05:40

ありがとうございます。ただ、dateClick(v);を呼び出す前に任意の日付で$("#calendar").fullCalendar( 'gotoDate', dates[0] );で移動しています。移動して、月表示が変わる場合、function (e)の日付が取得できません。どのようにれんば良いでしょうか？

行動規範の内容に同意します