diff --git a/assets/app.js b/assets/app.js index ad65a8390678272ed03af4eb2e20ae3ca6fd735a..08362c34481017ba55c16cff2f22fb5b56c5db7d 100644 --- a/assets/app.js +++ b/assets/app.js @@ -12,37 +12,7 @@ import './styles/app.css'; import './bootstrap'; import 'tui-calendar'; +import 'bootstrap'; var Calendar = require('tui-calendar'); /* CommonJS */ -require("tui-calendar/dist/tui-calendar.css"); - -// If you use the default popups, use this. -require("tui-date-picker/dist/tui-date-picker.css"); -require("tui-time-picker/dist/tui-time-picker.css"); - -var calendar = new Calendar('#calendar', { - defaultView: 'week', - taskView: true, - }); - -calendar.createSchedules([ - { - id: '1', - calendarId: '1', - title: 'my schedule', - category: 'time', - dueDateClass: '', - start: '2022-02-10T22:30:00+09:00', - end: '2022-02-11T02:30:00+09:00' - }, - { - id: '2', - calendarId: '1', - title: 'second schedule', - category: 'time', - dueDateClass: '', - start: '2022-02-11T17:30:00+09:00', - end: '2022-02-12T17:31:00+09:00', - isReadOnly: true // schedule is read-only - } -]); \ No newline at end of file +require("tui-calendar/dist/tui-calendar.css"); \ No newline at end of file diff --git a/assets/calendar.js b/assets/calendar.js new file mode 100644 index 0000000000000000000000000000000000000000..c1d43fcce1accb639533e33d254b530b28ae7f45 --- /dev/null +++ b/assets/calendar.js @@ -0,0 +1,54 @@ +/* +* Welcome to your app's main JavaScript file! +* +* We recommend including the built version of this JavaScript file +* (and its CSS file) in your base layout (base.html.twig). +*/ + +// any CSS you import will output into a single css file (app.css in this case) +import './styles/app.css'; + +// start the Stimulus application +import './bootstrap'; + +import 'tui-calendar'; + +var Calendar = require('tui-calendar'); /* CommonJS */ +require("tui-calendar/dist/tui-calendar.css"); + +// If you use the default popups, use this. +require("tui-date-picker/dist/tui-date-picker.css"); +require("tui-time-picker/dist/tui-time-picker.css"); + +var calendar = new Calendar('#calendar', { + defaultView: 'week', + taskView: true, +}); + +prevBtn.addEventListener("click", e => { + calendar.prev(); +}); +nextBtn.addEventListener("click", e => { + calendar.next(); +}); +calendar.createSchedules([ + { + id: '1', + calendarId: '1', + title: 'my schedule', + category: 'time', + dueDateClass: '', + start: '2022-02-10T22:30:00+09:00', + end: '2022-02-11T02:30:00+09:00' + }, + { + id: '2', + calendarId: '1', + title: 'second schedule', + category: 'time', + dueDateClass: '', + start: '2022-02-11T17:30:00+09:00', + end: '2022-02-12T17:31:00+09:00', + isReadOnly: true // schedule is read-only + } +]); diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity index 37360c086da9efe41c507b77615533916cc9a34f..9a1111b2e1a05d6bc843bccbee63e2d0d71bc91e 100644 --- a/node_modules/.yarn-integrity +++ b/node_modules/.yarn-integrity @@ -9,6 +9,7 @@ "@hotwired/stimulus@^3.0.0", "@symfony/stimulus-bridge@^3.0.0", "@symfony/webpack-encore@^1.7.0", + "bootstrap@^5.1.3", "core-js@^3.0.0", "regenerator-runtime@^0.13.2", "tui-calendar@^1.15.2", @@ -250,6 +251,7 @@ "body-parser@1.19.1": "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.1.tgz#1499abbaa9274af3ecc9f6f10396c995943e31d4", "bonjour@^3.5.0": "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5", "boolbase@^1.0.0": "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e", + "bootstrap@^5.1.3": "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34", "brace-expansion@^1.1.7": "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd", "braces@^3.0.1": "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107", "braces@~3.0.2": "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107", diff --git a/package.json b/package.json index a496a90b3c0e649c802564bdc2d55339395687f5..7575d1b421eac97722e206d06a74a04b6d88a751 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "build": "encore production --progress" }, "dependencies": { + "bootstrap": "^5.1.3", "tui-calendar": "^1.15.2" } } diff --git a/templates/calendar/index.html.twig b/templates/calendar/index.html.twig index a365b1103fec34ef25a851f60fe6a8ba13d74693..de3a6ab57f95abc589805b34fb966d7f9792b363 100644 --- a/templates/calendar/index.html.twig +++ b/templates/calendar/index.html.twig @@ -2,6 +2,10 @@ {% block title %}Hello CalendarController!{% endblock %} +{% block javascripts %} +{{ parent() }} +{{ encore_entry_script_tags('calendar') }} +{% endblock %} {% block body %} <style> .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; } @@ -15,23 +19,13 @@ <ul> <li>Your controller at <code><a href="{{ '/home/fanevark/step/calendrier/src/Controller/CalendarController.php'|file_link(0) }}">src/Controller/CalendarController.php</a></code></li> <li>Your template at <code><a href="{{ '/home/fanevark/step/calendrier/templates/calendar/index.html.twig'|file_link(0) }}">templates/calendar/index.html.twig</a></code></li> - </ul> + </ul> </div> <body> <div id="calendar" style"height: 800px;"></div> - <div id="menu"> - <span id="menu-navi"> - <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Today</button> - <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev"> - <i class="calendar-icon ic-arrow-line-left" data-action="move-prev">Prev</i> - </button> - <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next"> - <i class="calendar-icon ic-arrow-line-right" data-action="move-next">Nxt</i> - </button> - </span> - <span id="renderRange" class="render-range"></span> - </div> + <button id="prevBtn">Prev</button> + <button id="nextBtn">Next</button> </body> diff --git a/webpack.config.js b/webpack.config.js index 056b04aa67638796099e0a4e86c84dac7ac9ce19..cd84968761b162a7b2237e653bd0ddfef8c85b75 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,6 +21,7 @@ Encore * and one CSS file (e.g. app.css) if your JavaScript imports CSS. */ .addEntry('app', './assets/app.js') + .addEntry('calendar', './assets/calendar.js') // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js) .enableStimulusBridge('./assets/controllers.json') diff --git a/yarn.lock b/yarn.lock index b6f9d354b3c54ed6fa3888fbb0cae482b4e71104..f999f8dfc074cc8e892c770166a10664cd1b339c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1607,6 +1607,11 @@ boolbase@^1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bootstrap@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34" + integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"