New Sample : React Graph Calendar (#1098)

* Adding the Graph Calendar sample
This commit is contained in:
Sébastien Levert 2019-12-30 09:06:28 -05:00 committed by Vesa Juvonen
parent 1258e21ca0
commit 618de63a4b
32 changed files with 19155 additions and 148 deletions

View File

@ -312,7 +312,7 @@
},
"webpack": {
"version": "3.11.0",
"resolved": "http://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
"integrity": "sha512-3kOFejWqj5ISpJk4Qj/V7w98h9Vl52wak3CLiw/cDOfbVTq7FeoZ0SdoHHY9PYlHr50ZS42OfvzE2vB4nncKQg==",
"dev": true,
"requires": {
@ -604,7 +604,7 @@
},
"webpack": {
"version": "3.11.0",
"resolved": "http://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
"integrity": "sha512-3kOFejWqj5ISpJk4Qj/V7w98h9Vl52wak3CLiw/cDOfbVTq7FeoZ0SdoHHY9PYlHr50ZS42OfvzE2vB4nncKQg==",
"dev": true,
"requires": {
@ -833,25 +833,10 @@
},
"node-fetch": {
"version": "2.1.2",
"resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
"integrity": "sha1-q4hOjn5X44qUR1POxwb3iNF2i7U=",
"dev": true
},
"tar": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.6.tgz",
"integrity": "sha512-tMkTnh9EdzxyfW+6GK6fCahagXsnYk6kE6S9Gr9pjVdys769+laCTbodXDhPAjzVtEBazRgP0gYqOjnk9dQzLg==",
"dev": true,
"requires": {
"chownr": "^1.0.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.3.3",
"minizlib": "^1.1.0",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
"yallist": "^3.0.2"
}
},
"wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@ -861,8 +846,7 @@
"yallist": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
"dev": true
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
}
}
},
@ -962,7 +946,7 @@
},
"semver": {
"version": "5.2.0",
"resolved": "http://registry.npmjs.org/semver/-/semver-5.2.0.tgz",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.2.0.tgz",
"integrity": "sha1-KBmVuAwUSCCUFd28TPUMJpzvVcU=",
"dev": true
}
@ -1028,7 +1012,7 @@
"dependencies": {
"debug": {
"version": "2.2.0",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
"dev": true,
"requires": {
@ -1043,7 +1027,7 @@
},
"finalhandler": {
"version": "0.4.1",
"resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-0.4.1.tgz",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.4.1.tgz",
"integrity": "sha1-haF8bFmpRxfSYtYSMNSw6+PUoU0=",
"dev": true,
"requires": {
@ -1097,7 +1081,7 @@
},
"ms": {
"version": "0.7.1",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
"dev": true
},
@ -2617,7 +2601,7 @@
},
"md5.js": {
"version": "1.3.4",
"resolved": "http://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
"integrity": "sha1-6b296UogpawYsENA/Fdk1bCdkB0=",
"dev": true,
"requires": {
@ -2647,7 +2631,7 @@
},
"validator": {
"version": "9.4.1",
"resolved": "http://registry.npmjs.org/validator/-/validator-9.4.1.tgz",
"resolved": "https://registry.npmjs.org/validator/-/validator-9.4.1.tgz",
"integrity": "sha512-YV5KjzvRmSyJ1ee/Dm5UED0G+1L4GZnLN3w6/T+zZm8scVua4sOhYKWTUrKa0H/tMiJyO9QLHMPN+9mB/aMunA==",
"dev": true
}
@ -3512,7 +3496,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@ -4067,7 +4051,7 @@
},
"core-js": {
"version": "1.2.7",
"resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
},
"core-util-is": {
@ -4997,7 +4981,7 @@
"dependencies": {
"debug": {
"version": "2.3.3",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
"dev": true,
"requires": {
@ -5006,7 +4990,7 @@
},
"ms": {
"version": "0.7.2",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
"dev": true
},
@ -5044,7 +5028,7 @@
"dependencies": {
"debug": {
"version": "2.3.3",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
"dev": true,
"requires": {
@ -5053,7 +5037,7 @@
},
"ms": {
"version": "0.7.2",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
"dev": true
},
@ -5340,7 +5324,7 @@
},
"event-stream": {
"version": "3.0.20",
"resolved": "http://registry.npmjs.org/event-stream/-/event-stream-3.0.20.tgz",
"resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.0.20.tgz",
"integrity": "sha1-A4u7LqnqkDhbJvvBhU0LU58qvqM=",
"dev": true,
"requires": {
@ -5643,7 +5627,7 @@
},
"finalhandler": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
"integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
"dev": true,
"requires": {
@ -5809,7 +5793,7 @@
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
"dev": true
},
@ -6200,7 +6184,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -6221,12 +6206,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -6234,24 +6221,25 @@
},
"chownr": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"bundled": true
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -6289,8 +6277,6 @@
"fs-minipass": {
"version": "1.2.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
}
@ -6368,7 +6354,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -6380,6 +6367,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -6394,6 +6382,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -6401,12 +6390,13 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -6415,8 +6405,6 @@
"minizlib": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minipass": "^2.2.1"
}
@ -6425,6 +6413,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -6505,7 +6494,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -6517,6 +6507,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -6602,7 +6593,7 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -6638,6 +6629,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -6657,6 +6649,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -6667,21 +6660,6 @@
"dev": true,
"optional": true
},
"tar": {
"version": "4.4.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"chownr": "^1.0.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.2.4",
"minizlib": "^1.1.0",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.1",
"yallist": "^3.0.2"
}
},
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
@ -6700,19 +6678,20 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"optional": true
}
}
},
"fstream": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
"integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.2",
@ -6958,7 +6937,7 @@
},
"through2": {
"version": "0.6.5",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
"dev": true,
"requires": {
@ -7054,7 +7033,7 @@
},
"graceful-fs": {
"version": "1.2.3",
"resolved": "http://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
"integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
"dev": true
},
@ -7126,7 +7105,7 @@
"dependencies": {
"semver": {
"version": "4.3.6",
"resolved": "http://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
"dev": true
}
@ -7151,7 +7130,7 @@
"dependencies": {
"debug": {
"version": "2.2.0",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
"dev": true,
"requires": {
@ -7204,7 +7183,7 @@
},
"ms": {
"version": "0.7.1",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
"dev": true
},
@ -7296,7 +7275,7 @@
"dependencies": {
"ansi-regex": {
"version": "0.2.1",
"resolved": "http://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
"integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
"dev": true
},
@ -7308,7 +7287,7 @@
},
"chalk": {
"version": "0.5.1",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
"integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
"dev": true,
"requires": {
@ -7433,7 +7412,7 @@
},
"strip-ansi": {
"version": "0.3.0",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
"integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
"dev": true,
"requires": {
@ -7448,7 +7427,7 @@
},
"through2": {
"version": "0.5.1",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.5.1.tgz",
"integrity": "sha1-390BLrnHAOIyP9M084rGIqs3Lac=",
"dev": true,
"requires": {
@ -7603,12 +7582,12 @@
}
},
"handlebars": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz",
"integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==",
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz",
"integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==",
"dev": true,
"requires": {
"async": "^2.5.0",
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
@ -8589,7 +8568,7 @@
"dependencies": {
"async": {
"version": "1.5.2",
"resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
"dev": true
},
@ -10172,7 +10151,7 @@
},
"lodash": {
"version": "3.10.1",
"resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
"integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
"dev": true
}
@ -10273,7 +10252,7 @@
"dependencies": {
"async": {
"version": "0.9.2",
"resolved": "http://registry.npmjs.org/async/-/async-0.9.2.tgz",
"resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
"integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
"dev": true
},
@ -10291,7 +10270,7 @@
},
"lodash": {
"version": "3.10.1",
"resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
"integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
"dev": true
}
@ -10319,9 +10298,9 @@
}
},
"knockout": {
"version": "3.4.0",
"resolved": "http://registry.npmjs.org/knockout/-/knockout-3.4.0.tgz",
"integrity": "sha1-WdcmGBWhHrfBo/PHB3yomKRMqts="
"version": "3.5.0",
"resolved": "http://registry.npmjs.org/knockout/-/knockout-3.5.0.tgz",
"integrity": "sha512-vBUF/IsBDzaejHkNpiquKdc5uPrImXuQ4Mb9lEfNNJ5cyHGI8ThDupR+h3eMFZhfmPE/brfwcIAn/fm0yOvJUg=="
},
"lazy-cache": {
"version": "1.0.4",
@ -10435,7 +10414,7 @@
},
"lodash": {
"version": "1.0.2",
"resolved": "http://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
"integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
"dev": true
},
@ -10706,9 +10685,9 @@
}
},
"lodash.mergewith": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
"integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
"dev": true
},
"lodash.rest": {
@ -10823,7 +10802,7 @@
},
"semver": {
"version": "4.3.6",
"resolved": "http://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
"dev": true
}
@ -10831,7 +10810,7 @@
},
"lolex": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/lolex/-/lolex-1.4.0.tgz",
"resolved": "https://registry.npmjs.org/lolex/-/lolex-1.4.0.tgz",
"integrity": "sha1-LycSsbwYDendzF06epbvPAuxYq0=",
"dev": true
},
@ -11182,19 +11161,10 @@
}
}
},
"minizlib": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.1.tgz",
"integrity": "sha512-TrfjCjk4jLhcJyGMYymBH6oTXcWjYbUAXTHDbtnWHjZC25h0cdajHuPE1zxb4DVmu8crfh+HwH/WMuyLG0nHBg==",
"dev": true,
"requires": {
"minipass": "^2.2.1"
}
},
"mixin-deep": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
"integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
"dev": true,
"requires": {
"for-in": "^1.0.2",
@ -11259,7 +11229,7 @@
"dependencies": {
"commander": {
"version": "2.15.1",
"resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
"integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
"dev": true
},
@ -11444,6 +11414,19 @@
"semver": "~5.3.0",
"tar": "^2.0.0",
"which": "1"
},
"dependencies": {
"tar": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
"integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
"dev": true,
"requires": {
"block-stream": "*",
"fstream": "^1.0.12",
"inherits": "2"
}
}
}
},
"node-int64": {
@ -12409,7 +12392,7 @@
"dependencies": {
"fs-extra": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
"integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
"dev": true,
"requires": {
@ -12420,7 +12403,7 @@
},
"jsonfile": {
"version": "2.4.0",
"resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
"dev": true,
"requires": {
@ -14661,7 +14644,7 @@
},
"rimraf": {
"version": "2.5.4",
"resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
"integrity": "sha1-loAAk8vxoMhr2VtGJUZ1NcKd+gQ=",
"dev": true,
"requires": {
@ -14788,7 +14771,7 @@
},
"os-locale": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@ -14882,7 +14865,7 @@
},
"semver": {
"version": "5.3.0",
"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
"dev": true
},
@ -15069,7 +15052,7 @@
"dependencies": {
"lolex": {
"version": "1.3.2",
"resolved": "http://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
"resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
"integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=",
"dev": true
}
@ -15211,7 +15194,7 @@
"dependencies": {
"debug": {
"version": "2.3.3",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
"dev": true,
"requires": {
@ -15220,7 +15203,7 @@
},
"ms": {
"version": "0.7.2",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
"dev": true
},
@ -15244,7 +15227,7 @@
"dependencies": {
"debug": {
"version": "2.3.3",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
"dev": true,
"requires": {
@ -15253,7 +15236,7 @@
},
"ms": {
"version": "0.7.2",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
"dev": true
}
@ -15280,7 +15263,7 @@
"dependencies": {
"debug": {
"version": "2.3.3",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
"integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
"dev": true,
"requires": {
@ -15289,7 +15272,7 @@
},
"ms": {
"version": "0.7.2",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
"dev": true
}
@ -15315,7 +15298,7 @@
},
"debug": {
"version": "2.2.0",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
"dev": true,
"requires": {
@ -15324,7 +15307,7 @@
},
"ms": {
"version": "0.7.1",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
"dev": true
}
@ -15448,7 +15431,7 @@
},
"split": {
"version": "0.2.10",
"resolved": "http://registry.npmjs.org/split/-/split-0.2.10.tgz",
"resolved": "https://registry.npmjs.org/split/-/split-0.2.10.tgz",
"integrity": "sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc=",
"dev": true,
"requires": {
@ -15758,7 +15741,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@ -15824,7 +15807,7 @@
"dependencies": {
"colors": {
"version": "1.1.2",
"resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
"integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
"dev": true
},
@ -15865,14 +15848,45 @@
"dev": true
},
"tar": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"version": "4.4.13",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
"integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
"dev": true,
"requires": {
"block-stream": "*",
"fstream": "^1.0.2",
"inherits": "2"
"chownr": "^1.1.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.8.6",
"minizlib": "^1.2.1",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
"yallist": "^3.0.3"
},
"dependencies": {
"minipass": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
"integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
"dev": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
}
},
"minizlib": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
"integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
"dev": true,
"requires": {
"minipass": "^2.9.0"
}
},
"yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
"dev": true
}
}
},
"ternary-stream": {
@ -16115,7 +16129,7 @@
"dependencies": {
"body-parser": {
"version": "1.14.2",
"resolved": "http://registry.npmjs.org/body-parser/-/body-parser-1.14.2.tgz",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.14.2.tgz",
"integrity": "sha1-EBXLH+LEQ4WCWVgdtTMy+NDPUPk=",
"dev": true,
"requires": {
@ -16147,7 +16161,7 @@
},
"debug": {
"version": "2.2.0",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
"dev": true,
"requires": {
@ -16166,13 +16180,13 @@
},
"iconv-lite": {
"version": "0.4.13",
"resolved": "http://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
"integrity": "sha1-H4irpKsLFQjoMSrMOTRfNumS4vI=",
"dev": true
},
"ms": {
"version": "0.7.1",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
"dev": true
},
@ -16554,7 +16568,7 @@
},
"yargs": {
"version": "3.10.0",
"resolved": "http://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
"dev": true,
"requires": {
@ -16925,7 +16939,7 @@
},
"graceful-fs": {
"version": "3.0.11",
"resolved": "http://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
"integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
"dev": true,
"requires": {
@ -16946,7 +16960,7 @@
},
"through2": {
"version": "0.6.5",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
"dev": true,
"requires": {
@ -17447,7 +17461,7 @@
},
"ws": {
"version": "4.1.0",
"resolved": "http://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
"resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
"integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
"dev": true,
"requires": {
@ -17484,7 +17498,7 @@
"dependencies": {
"sax": {
"version": "0.5.8",
"resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
"resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
"integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
"dev": true
}
@ -17522,7 +17536,7 @@
},
"yargs": {
"version": "4.6.0",
"resolved": "http://registry.npmjs.org/yargs/-/yargs-4.6.0.tgz",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-4.6.0.tgz",
"integrity": "sha1-y0BQwBWb+2u2ScD0r1UFJqhGGdw=",
"dev": true,
"requires": {
@ -17568,7 +17582,7 @@
},
"os-locale": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@ -17588,7 +17602,7 @@
},
"yargs-parser": {
"version": "2.4.1",
"resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz",
"integrity": "sha1-hVaN488VD/SfpRgl8DqMiA3cxcQ=",
"dev": true,
"requires": {

View File

@ -22,7 +22,7 @@
"@types/es6-promise": "0.0.33",
"@types/knockout": "3.4.39",
"@types/webpack-env": "1.13.1",
"knockout": "3.4.0"
"knockout": "3.5.0"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.0",

View File

@ -0,0 +1,25 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

32
samples/react-graph-calendar/.gitignore vendored Normal file
View File

@ -0,0 +1,32 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

View File

@ -0,0 +1,12 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.9.1",
"libraryName": "react-graph-calendar",
"libraryId": "42fe0a0f-c4d9-4b05-806c-3857decb3d71",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

View File

@ -0,0 +1,58 @@
# React Graph Calendar Web Part
## Summary
This is a sample web part developed using React Framework to gather events from the underlying group calendar of a Team site. This sample also demonstrates the utilization of web parts as Teams tabs and offering a visualization context to change behaviors based on the platform used (Getting the proper information from the team vs. SharePoint site, understanding the context of the theme on Teams, etc.).
### Web Part in SharePoint Online
![The web part in action](./assets/react-graph-calendar-spo.gif)
### Web Part in Microsoft Teams
![The web part in action](./assets/react-graph-calendar-teams.gif)
Webpart is developed using below technologies
* React Framework
* Full Calendar (fullcalendar.io)
* Microsoft Teams API
* Office UI Fabric
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
## Prerequisites
It is required that the users have view access on the underlying calendar.
## Solution
Solution|Author(s)
--------|---------
react-graph-calendar | [Sébastien Levert](https://www.linkedin.com/in/sebastienlevert) ([@sebastienlevert](https://twitter.com/sebastienlevert))
## Version history
Version|Date|Comments
-------|----|--------
1.0 |December 29, 2019 | Initial Release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `gulp serve`
- `gulp bundle --ship`
- `gulp package-solution --ship`
- Add to AppCatalog and deploy
- Sync to Teams
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-calendar" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 MiB

View File

@ -0,0 +1,18 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"graph-calendar-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/graphCalendar/GraphCalendarWebPart.js",
"manifest": "./src/webparts/graphCalendar/GraphCalendarWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"GraphCalendarWebPartStrings": "lib/webparts/graphCalendar/loc/{locale}.js"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-graph-calendar",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1,20 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-graph-calendar-client-side-solution",
"id": "42fe0a0f-c4d9-4b05-806c-3857decb3d71",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Group.Read.All"
}
]
},
"paths": {
"zippedPackage": "solution/react-graph-calendar.sppkg"
}
}

View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -0,0 +1,7 @@
'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,48 @@
{
"name": "react-graph-calendar",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@fullcalendar/core": "^4.3.1",
"@fullcalendar/daygrid": "^4.3.0",
"@fullcalendar/moment": "^4.3.0",
"@fullcalendar/moment-timezone": "^4.3.0",
"@fullcalendar/react": "^4.3.0",
"@microsoft/sp-core-library": "1.9.1",
"@microsoft/sp-lodash-subset": "1.9.1",
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
"@microsoft/sp-webpart-base": "1.9.1",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.9.1",
"@microsoft/sp-tslint-rules": "1.9.1",
"@microsoft/sp-module-interfaces": "1.9.1",
"@microsoft/sp-webpart-workbench": "1.9.1",
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -0,0 +1,26 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "1c1497a4-63fa-4722-b3a6-2ce00a662514",
"alias": "GraphCalendarWebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "GraphCalendar" },
"description": { "default": "GraphCalendar description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "GraphCalendar"
}
}]
}

View File

@ -0,0 +1,94 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import * as strings from 'GraphCalendarWebPartStrings';
import GraphCalendar from './components/GraphCalendar';
import { IGraphCalendarProps } from './components/IGraphCalendarProps';
import * as microsoftTeams from '@microsoft/teams-js';
import { initializeIcons } from 'office-ui-fabric-react';
import { PropertyPaneSlider } from '@microsoft/sp-property-pane';
export interface IGraphCalendarWebPartProps {
limit: number;
}
export default class GraphCalendarWebPart extends BaseClientSideWebPart<IGraphCalendarWebPartProps> {
private _teamsContext: microsoftTeams.Context;
public render(): void {
const element: React.ReactElement<IGraphCalendarProps> = React.createElement(
GraphCalendar,
{
limit: this.properties.limit,
context: this.context,
teamsContext: this._teamsContext
}
);
ReactDom.render(element, this.domElement);
}
protected onInit(): Promise<any> {
// create a new promise
return new Promise<void>((resolve, _reject) => {
// Sets a default if limit has not been defined
if (this.properties.limit === undefined) {
this.properties.limit = 100;
}
// Sets the Teams context if in Teams
if (this.context.microsoftTeams) {
this.context.microsoftTeams.getContext(context => {
this._teamsContext = context;
// resolve the promise
resolve(undefined);
});
// Initialize the OUIF icons if in Teams
initializeIcons();
} else {
// resolve the promise
resolve(undefined);
}
});
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneSlider('limit', {
label: "Events to load per active view",
max: 500,
min: 50
})
]
}
]
}
]
};
}
}

View File

@ -0,0 +1,13 @@
@import './GraphCalendar.Teams.module.scss';
:global {
.fc {
color: #ffffff;
}
.fc-unthemed {
td.fc-today {
background: #3B3A39;
}
}
}

View File

@ -0,0 +1,39 @@
@import './GraphCalendar.module.scss';
:global {
.fc {
color: #525c6d;
}
.fc-unthemed {
td.fc-today {
background: #E1DFDD;
}
}
.fc-toolbar h2 {
font-weight: 400;
}
.fc-event {
cursor: pointer;
background-color: #6264a7;
border-radius: 0px;
border: 1px solid #464775;
}
.fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
background-color: #6264a7;
border-color: #464775;
}
.fc-prev-button, .fc-next-button, .fc-today-button {
background-color: #464775;
border-color: #6264a7;
}
.fc-button-primary:hover {
background-color: #6264a7;
border-color: #464775;
}
}

View File

@ -0,0 +1,103 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
:global {
.fc-event {
cursor: pointer;
background-color: $ms-color-themeSecondary;
border-radius: 0px;
border: 1px solid $ms-color-themePrimary;
}
.fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active {
background-color: $ms-color-themeSecondary;
border-color: $ms-color-themePrimary;
}
.fc-prev-button, .fc-next-button, .fc-today-button {
background-color: $ms-color-themePrimary;
border-color: $ms-color-themeSecondary;
}
.fc-button-primary:hover {
background-color: $ms-color-themeSecondary;
border-color: $ms-color-themePrimary;
}
}
.graphCalendar {
font-family: "Segoe UI","Helvetica Neue","Apple Color Emoji","Segoe UI Emoji",Helvetica,Arial,sans-serif;
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

View File

@ -0,0 +1,222 @@
import * as React from 'react';
import { createRef } from "office-ui-fabric-react/lib/Utilities";
import styles from './GraphCalendar.module.scss';
import { IGraphCalendarProps } from './IGraphCalendarProps';
import { MSGraphClient } from "@microsoft/sp-http";
import FullCalendar from '@fullcalendar/react';
import { EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import * as moment from 'moment-timezone';
import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
interface IGraphCalendarState {
events: EventInput[];
height: number;
currentActiveStartDate: Date;
currentActiveEndDate: Date;
isEventDetailsOpen: boolean;
currentSelectedEvent: EventInput;
groupId: string;
}
export default class GraphCalendar extends React.Component<IGraphCalendarProps, IGraphCalendarState> {
private calendar = createRef<FullCalendar>();
/**
* Builds the Component with the provided properties
* @param props Properties of the web part
*/
constructor(props: IGraphCalendarProps) {
super(props);
// If this is running in Teams, embed the specific Teams styling
if(this._isRunningInTeams()) {
import("./GraphCalendar.Teams.module.scss");
if(this.props.teamsContext.theme == "dark") {
import("./GraphCalendar.Teams.Dark.module.scss");
}
}
this.state = {
events: [],
height: this._calculateHeight(),
currentActiveStartDate: null,
currentActiveEndDate: null,
isEventDetailsOpen: false,
currentSelectedEvent: null,
groupId: this._isRunningInTeams() ? this.props.teamsContext.groupId : this.props.context.pageContext.site.group ? this.props.context.pageContext.site.group.id : ""
};
}
/**
* When the component is initially mounted
*/
public componentDidMount(): void {
// Gets the calendar current Active dates
let calendarStartDate = this.calendar.value.getApi().view.activeStart;
let calendarEndDate = this.calendar.value.getApi().view.activeEnd;
// Loads the events
this._loadEvents(calendarStartDate, calendarEndDate);
}
/**
* Renders the web part
*/
public render(): React.ReactElement<IGraphCalendarProps> {
return (
<div className={ styles.graphCalendar }>
<FullCalendar
ref={this.calendar}
defaultView="dayGridMonth"
plugins={[ dayGridPlugin ]}
windowResize={this._handleResize.bind(this)}
datesRender={this._datesRender.bind(this)}
eventClick={this._handleEventClick.bind(this)}
height={this.state.height}
events={this.state.events} />
{this.state.currentSelectedEvent &&
<Panel
isOpen={this.state.isEventDetailsOpen}
type={ PanelType.smallFixedFar }
headerText={this.state.currentSelectedEvent ? this.state.currentSelectedEvent.title : ""}
closeButtonAriaLabel='Close'>
<h3>Start Time</h3>
<span>{moment(this.state.currentSelectedEvent.start).format('MMMM Do YYYY [at] h:mm:ss a')}</span>
<h3>Start Time</h3>
<span>{moment(this.state.currentSelectedEvent.end).format('MMMM Do YYYY [at] h:mm:ss a')}</span>
{this.state.currentSelectedEvent.extendedProps["location"] &&
<div>
<h3>Location</h3>
<span>{this.state.currentSelectedEvent.extendedProps["location"]}</span>
</div>
}
{this.state.currentSelectedEvent.extendedProps["body"] &&
<div>
<h3>Body</h3>
<span>{this.state.currentSelectedEvent.extendedProps["body"]}</span>
</div>
}
</Panel>
}
</div>
);
}
/**
* Calculates the dynamic height of the surface to render.
* Mainly used for Teams validation so it renders "full-screen" in Teams
*/
private _calculateHeight(): number {
if(this._isRunningInTeams()) {
return window.innerHeight - 30;
} else {
return 600;
}
}
/**
* Validates if the current web part is running in Teams
*/
private _isRunningInTeams() {
return this.props.teamsContext;
}
/**
* Handles the click event and opens the OUIF Panel
* @param eventClickInfo The information about the selected event
*/
private _handleEventClick(eventClickInfo: any) {
this.setState({
isEventDetailsOpen: true,
currentSelectedEvent: eventClickInfo.event
});
}
/**
* If the view changed, reload the events based on the active view
* @param info Information about the current active view
*/
private _datesRender(info: any) {
if(this.calendar.value) {
// If the active view has changed
if((this.state.currentActiveStartDate && this.state.currentActiveEndDate) && this.state.currentActiveStartDate.toString() != info.view.activeStart.toString() && this.state.currentActiveEndDate.toString() != info.view.activeEnd.toString()) {
this._loadEvents(info.view.activeStart, info.view.activeEnd);
}
}
}
/**
* Handles the resize event when in Microsoft Teams to ensure a proper responsive behaviour
*/
private _handleResize() {
if(this._isRunningInTeams()) {
this.setState({
height: window.innerHeight - 30
});
}
}
/**
* Loads the Events based on the current state of the Calendar
* @param startDate The first visible date on the calendar
* @param endDate The last visible date on the calendar
*/
private _loadEvents(startDate: Date, endDate: Date): void {
// If a Group was found, execute the query. If not, do nothing.
if(this.state.groupId) {
this.props.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
client
.api(`/groups/${this.state.groupId}/events`)
.version("v1.0")
.select('subject,start,end,location,bodyPreview,isAllDay')
.filter(`start/dateTime ge '${startDate.toISOString()}' and end/dateTime le '${endDate.toISOString()}'`)
.top(this.props.limit)
.get((err, res) => {
if (err) {
console.error(err);
return;
}
var events: Array<EventInput> = new Array<EventInput>();
res.value.map((item: any) => {
// Build a Timezone enabled Date
let currentStartDate = moment.tz(item.start.dateTime, item.start.timeZone);
let currentEndDate = moment.tz(item.end.dateTime, item.end.timeZone);
// Adding all retrieved events to the result array
events.push({
title: item.subject,
// If the event is an All Day event, add 1 day without Timezone to the start date
start: !item.isAllDay ? currentStartDate.clone().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format() : moment(currentStartDate).add(1, 'd').toISOString(),
// If the event is an All Day event, add 1 day without Timezone to the end date
end: !item.isAllDay ? currentEndDate.clone().tz(Intl.DateTimeFormat().resolvedOptions().timeZone).format() : moment(currentEndDate).add(1, 'd').toISOString(),
allDay: item.isAllDay,
location: item.location.displayName,
body: item.bodyPreview
});
});
// Sets the state with the retrieved events and current active calendar dates
this.setState({
events: events,
currentActiveStartDate: startDate,
currentActiveEndDate: endDate,
currentSelectedEvent: null
});
});
});
}
}
}

View File

@ -0,0 +1,8 @@
import { WebPartContext } from "@microsoft/sp-webpart-base";
import * as microsoftTeams from '@microsoft/teams-js';
export interface IGraphCalendarProps {
limit: number;
context: WebPartContext;
teamsContext: microsoftTeams.Context;
}

View File

@ -0,0 +1,7 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field"
}
});

View File

@ -0,0 +1,10 @@
declare interface IGraphCalendarWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
}
declare module 'GraphCalendarWebPartStrings' {
const strings: IGraphCalendarWebPartStrings;
export = strings;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,38 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

View File

@ -0,0 +1,30 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

View File

@ -20,7 +20,7 @@
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"axios": "^0.16.2",
"axios": "^0.19.0",
"lodash": "^4.17.4",
"react": "15.4.2",
"react-dom": "15.4.2"