40 |
47 |
48 |
49 |
64 |
67 |
Month
68 |
Year
69 |
72 |
87 |
89 | Monday
90 | Tuesday
91 | Wednesday
92 | Thursday
93 | Friday
94 | Saturday
95 | Sunday
96 |
97 |
98 |
99 |
100 |
110 |
111 |
112 |
113 |
203 |
204 |
205 |
206 |
207 |
--------------------------------------------------------------------------------
/src/CSS/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
350 |
--------------------------------------------------------------------------------
/src/JS/saveData.js:
--------------------------------------------------------------------------------
1 | import { monthEvents } from "./getMonth.js"
2 |
3 | let titleEvent = document.getElementById("title-event");
4 | let startDate = document.getElementById("start-date");
5 | let timeRemindEvent = document.getElementById("time");
6 | let description = document.getElementById("textarea-description");
7 | let typeEvent = document.getElementById("Meeting");
8 | let asideEvents = document.getElementById("aside-events");
9 | const asidePempty = document.getElementById('aside-p-empty')
10 | const form = document.getElementById("mainSectionModal");
11 | const overlay = document.getElementById("blurModal");
12 | const year = document.getElementById("currentYear");
13 | let months;
14 | let control = 0;
15 | let arrayHours = [];
16 | let daySection = "";
17 | let idEvent = 1;
18 | let arrData = [];
19 |
20 | if (localStorage.length !== 0) {
21 | arrData = JSON.parse(localStorage.getItem("calendar_events"));
22 |
23 |
24 | }
25 |
26 | function saveData() {
27 | if(JSON.parse(localStorage.getItem("calendar_events")) != null){
28 | idEvent = JSON.parse(localStorage.getItem("calendar_events")).length+1;
29 | arrData = JSON.parse(localStorage.getItem("calendar_events"));
30 | }
31 | let timeSplit = startDate.value.split("T");
32 | let objData = {
33 | title: titleEvent.value,
34 | startDate: {
35 | time: timeSplit[1],
36 | date: timeSplit[0],
37 | },
38 | timeRemindEvent: timeRemindEvent.value,
39 | description: description.value,
40 | typeEvent: typeEvent.value,
41 | id:idEvent,
42 | };
43 | if(JSON.parse(localStorage.getItem("calendar_events")) == null){
44 | arrData = [];
45 | }
46 | if((JSON.parse(localStorage.getItem("calendar_events")) != null && JSON.parse(localStorage.getItem("calendar_events")).length == 0)){
47 | arrData = JSON.parse(localStorage.getItem("calendar_events"));
48 | }
49 |
50 | if((JSON.parse(localStorage.getItem("calendar_events")) != null && JSON.parse(localStorage.getItem("calendar_events")).length != 0)){
51 | let localEvents = JSON.parse(localStorage.getItem("calendar_events"));
52 | localEvents.forEach(event =>{
53 | daySection = document.getElementById(`${parseInt(objData.startDate.date.split('-')[2])}`);
54 |
55 | if(!arrayHours.includes(objData.startDate.time) && (daySection.getAttribute("id") == parseInt(objData.startDate.date.split("-")[2]))){
56 | arrData.push(objData);
57 | orderLocal(arrData)
58 | localStorage.setItem("calendar_events", JSON.stringify(arrData));
59 | getEventData();
60 | addEventDay(months, arrayHours);
61 | }
62 | });
63 | }else{
64 |
65 | arrData.push(objData);
66 | orderLocal(arrData)
67 | localStorage.setItem("calendar_events", JSON.stringify(arrData));
68 | getEventData();
69 | addEventDay(months, arrayHours);
70 | }
71 | overlay.classList.add('hide');
72 |
73 | form.classList.add('hide');
74 | }
75 |
76 | function addEventDay(monthEvents, array) {
77 | months = monthEvents;
78 | arrayHours = array;
79 |
80 | //we get localStorage item
81 | const events = JSON.parse(localStorage.getItem("calendar_events"));
82 | //loop localStorage
83 | if (events != null) { //if localStorage is not empty
84 |
85 | events.forEach(eventsLocal => { //recorremos el localStorage con este bucle
86 |
87 | if ((parseInt(eventsLocal.startDate.date.split('-')[1]) == months + 1) && (year.textContent == eventsLocal.startDate.date.split('-')[0])) { //comprobamos si el mes del evento que está en el local es igual al mes actual
88 | const daySection = document.getElementById(`${parseInt(eventsLocal.startDate.date.split('-')[2])}`); //obtenemos el dia del evento
89 |
90 |
91 | if (daySection.hasChildNodes()) { //si el daySection tiene hijos hacemos una comprobacion de daySection
92 |
93 | if (daySection.querySelector('.section__div--span') == null) { //comprobamos si daySection tiene hijos con la clase section__div--span
94 | //creamos el hijo en caso de que de null
95 | const divEvents = document.createElement('div');
96 | divEvents.setAttribute('class', 'section__div--span');
97 |
98 |
99 | if(divEvents.querySelectorAll('.section__span--span').length == 0){
100 | const span = document.createElement('span');
101 | span.setAttribute('class', 'section__span--span');
102 | span.textContent = `${eventsLocal.title}-${eventsLocal.startDate.time}`;
103 | divEvents.appendChild(span);
104 | daySection.appendChild(divEvents);
105 | arrayHours.push(eventsLocal.startDate.time);
106 | }
107 | }else{
108 | for(let i = 0; i < events.length; i++){
109 | if(!arrayHours.includes(events[i].startDate.time) && (daySection.getAttribute("id") == parseInt(events[i].startDate.date.split("-")[2]))){
110 | let divEvents = daySection.querySelector(".section__div--span");
111 | const span = document.createElement('span');
112 | span.setAttribute('class', 'section__span--span');
113 | span.textContent = `${events[i].title}-${events[i].startDate.time}`;
114 | divEvents.appendChild(span);
115 | arrayHours.push(events[i].startDate.time);
116 | }
117 | }
118 | }
119 | }
120 | }
121 | });
122 | control = 0;
123 | }
124 |
125 | }
126 |
127 | function orderLocal(arrData) {
128 | arrData.sort((a, b) => new Date(a.startDate.date).getTime() - new Date(b.startDate.date).getTime());
129 | }
130 |
131 |
132 | function getEventData() {
133 | let events = JSON.parse(localStorage.getItem("calendar_events"));
134 |
135 | const date = new Date();
136 |
137 | if (localStorage.getItem("calendar_events") != null) {
138 |
139 |
140 |
141 | if (asideEvents.hasChildNodes) {
142 |
143 |
144 | const articles = document.querySelectorAll('.aside__article--Event');
145 |
146 | articles.forEach(children => {
147 | asideEvents.removeChild(children)
148 | })
149 |
150 |
151 | }
152 |
153 | let counterId = 1;
154 | let counterIdButton = 1;
155 | events.forEach((element) => {
156 |
157 | let eventArticle = document.createElement("article");
158 | eventArticle.className = "aside__article--Event"
159 | let eventTitle = element.title;
160 | let eventDate = element.startDate.date;
161 | let eventTime = element.startDate.time;
162 | let eventDescription = element.description;
163 | let typeEvent = element.typeEvent;
164 | let buttonDeleteEvent = document.createElement("button");
165 | let idButtonDelete = "buttonDelete-";
166 | let i = 0;
167 |
168 | while (i < 5) {
169 | idButtonDelete = idButtonDelete + counterId;
170 | let eventInfo = document.createElement("p");
171 | switch (i) {
172 | case 0:
173 | const img = document.createElement("img");
174 | img.setAttribute("src", "./src/img/4781812_bin_delete_file_garbage_recycle_icon.png");
175 | img.setAttribute('class', 'button__img--bin');
176 | buttonDeleteEvent.setAttribute("class", "article__button--deleteEvent");
177 | buttonDeleteEvent.setAttribute("data-delete", counterIdButton);//idEvent, element.id
178 | buttonDeleteEvent.setAttribute("id", idButtonDelete);
179 | eventArticle.setAttribute("id", "aside__article--Event"+counterIdButton)
180 | buttonDeleteEvent.appendChild(img);
181 | eventInfo.setAttribute("id", "title-aside");
182 | eventInfo.textContent = eventTitle;
183 | eventArticle.appendChild(buttonDeleteEvent);
184 | eventArticle.appendChild(eventInfo);
185 | break;
186 | case 1:
187 | eventInfo.setAttribute("id", "start-date-aside");
188 | eventInfo.textContent = eventDate;
189 | eventArticle.appendChild(eventInfo);
190 | break;
191 | case 2:
192 | eventInfo.setAttribute("class", "start-time-aside");
193 | eventInfo.textContent = eventTime;
194 | eventArticle.appendChild(eventInfo);
195 | break;
196 | case 3:
197 | eventInfo.setAttribute("id", "description-aside");
198 | eventInfo.textContent = eventDescription;
199 | eventArticle.appendChild(eventInfo);
200 | break;
201 | case 4:
202 | eventInfo.setAttribute("id", "type-event-aside");
203 | eventInfo.textContent = typeEvent;
204 | eventArticle.appendChild(eventInfo);
205 | break;
206 | }
207 | counterId++;
208 | i++;
209 | }
210 | asideEvents.appendChild(eventArticle);
211 | counterIdButton++;
212 | });
213 |
214 | if (asideEvents.hasChildNodes) {
215 |
216 | const articles = document.querySelectorAll('.aside__article--Event');
217 |
218 |
219 | if (articles.length != 0) {
220 | asidePempty.classList.add('hide')
221 | } else {
222 | asidePempty.classList.remove('hide')
223 | }
224 |
225 | }
226 |
227 | }
228 | }
229 |
230 | function clearData() {
231 | titleEvent.value = "";
232 | startDate.value = "";
233 | timeRemindEvent.value = "5";
234 | description.value = "";
235 | typeEvent.value = "meeting";
236 | }
237 |
238 | export { saveData, clearData, getEventData, addEventDay };
239 |
--------------------------------------------------------------------------------
26 | 
27 | 
28 | 
29 |
30 | ##### PC image
31 | 
