wired-elements/examples/calendar.html at 1613b12c647d9f7d7b07d017b6ee0cf6d6808e64 · rough-stuff/wired-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">

  <script type="module" src="../lib/wired-calendar.js"></script>
  <script type="module" src="../lib/wired-button.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: 'Gloria Hallelujah', sans-serif;
      font-size: 24px;
      font-display: fallback;
      letter-spacing: 0.05em;
      line-height: 1.5;
    }

    .item_wrapper {
      margin-bottom: 30px;
      display: inline-block;
    }

    p {
      margin: 0 10px;
    }

    wired-calendar {
      margin: 10px;
    }

    wired-button {
      margin: 0 10px;
    }

    .custom {
      --wired-calendar-bg: yellow;
      --wired-calendar-color: red;
      --wired-calendar-selected-color: black;
      --wired-calendar-dimmed-color: brown;
      width: 260px;
      height: 260px;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <div>
    <!-- Minimal working calendar -->
    <div class="item_wrapper">
      <p>Minimal</p>
      <wired-calendar></wired-calendar>
    </div>

    <!-- Calendar with some parameters -->
    <div class="item_wrapper">
      <p>"fr-FR" locale</p>
      <!-- Note: parameter dates not affected by locale -->
      <wired-calendar id="calendar2" elevation="1" firstdate="Apr 15, 2019" lastdate="Jul 15, 2019"
        selected="Jul 4, 2019" locale="fr-FR" initials>
      </wired-calendar>
    </div>

    <!-- Calendar with custom style and some parameters -->
    <div class="item_wrapper">
      <p>"de-DE" locale</p>
      <wired-calendar id="calendar3" class="custom" firstdate="Apr 15, 2019" locale="de-DE" initials>
      </wired-calendar>
    </div>
  </div>

  <hr>
  <!-- Calendar with javascript interactions (event and non-event driven) -->
  <section>
    <p>"es-MX" locale with javascript interactions sample (event and non-event driven)</p>
    <wired-calendar id="calendar4" elevation="5" firstdate="Apr 15, 2019" lastdate="Jul 15, 2019" locale="es-MX"
      initials>
    </wired-calendar>
    <p id="calendar4-result">Select a date in the calendar
    <p>
    <div style="margin-top: 16px;">
      <wired-button id="btn-today">Today</wired-button>
      <wired-button id="btn-update">Update</wired-button>
    </div>
    <p id="calendar4-update">No updated yet
    <p>
  </section>

  <script>
    const myCalendar4 = document.getElementById('calendar4');
    const myCalendar4result = document.getElementById('calendar4-result');
    const myCalendar4update = document.getElementById('calendar4-update');
    document.getElementById('btn-update').addEventListener('click', () => {
      const today = new Date();
      const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
      const updateTimeLeyend = ' <small>Updated at:' + time + '</small>';

      const selectedObject = myCalendar4.value;
      if (selectedObject && selectedObject.date) {
        myCalendar4update.innerHTML = selectedObject.date.toLocaleDateString() + updateTimeLeyend;
      } else {
        myCalendar4update.innerHTML = 'No date selected yet.' + updateTimeLeyend;
      }
    });
    document.getElementById('btn-today').addEventListener('click', () => {
      let today = new Date();
      // Sample using optional internal date formatter
      formatedDate = myCalendar4.format(today);
      console.log('Set date to today = ', formatedDate);

      // Set selected date using any format accepted by javascript Date object
      myCalendar4.setSelectedDate(formatedDate);
    });
    myCalendar4.addEventListener('selected', () => {
      let selectedObject = myCalendar4.value;
      // `selectedObject.date` is a javascript Date object
      // `selectedObject.text` is the formated text of the date
      let formatedDate = selectedObject.text;
      myCalendar4result.innerHTML = formatedDate + ' <br><small>Note: Internal date handling not affected by locale.</small>';
    });

  </script>
</body>

</html>