jQuery Selectable list as calendar
Question
I would like to create a simply calendar which is represented by 7 columns (as days) and a few rows (for example 6 rows - every row for 4 hours).
the result should be like:
monday tuesday wednesday ...
0-4 listItem listItem listItem
4-8 listItem listItem listItem
8-12 listItem listItem listItem
12-16 listItem listItem listItem
...
then the user should be able to select a few listItem - including 'across days' (by click on the first element and drag the cursor on the next or previous).
I use a selectable from jqueryUi - https://jqueryui.com/selectable/#default but it works only for list in one column.
I tried to modify the code and added column-count: 2; as ol css attribute:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; border: 2px solid black}
ol{
column-count: 2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#selectable" ).selectable();
} );
</script>
</head>
<body>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>
but there is a problem because the select order is wrong:
There is also a grid selectable list elements - https://jqueryui.com/selectable/#display-grid but the order is not correct for my case (the order is by rows, not by columns).
How is it possible to create multiple columns from one ol list and use selectable jqueryUi on this elements?
2 answers
solution1
1
To perhaps improve the layout of what you had in mind and tidy up the code, what you could do is create a form to allow your user to input their list item and allow them to select a date for that list item through a date picker. Materialize have a great one that's powered by jQuery: https://materializecss.com/pickers.html .
solution2
1 ACCPTED 2018-12-29 02:34:18
I would suggest something like float: left; versus column-count: 2; . Either way, I would advise setting a proper width and height for the ol . This will make it easier for selectable to work.
Example 1
$(function() { $("#selectable").selectable(); });
#feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 10px; width: 260px; height: 240px; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; border: 2px solid black; width: 100px; float: left; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li> </ol>
If you need more row and column control, I would switch to a table element. Or make multiple columns from multiple Lists.
Example 2
$(function() { $(".week-days").selectable({ filter: ".day-list > td" }); });
#feedback { font-size: 1.4em; } .day-list .ui-selecting { background: #FECA40; border-color: #999; } .day-list .ui-selected { background: #F39814; color: white; border: 2px solid #000; } .day-list td { margin: 3px; padding: 0.2em; font-size: 1.3em; height: 18px; border: 2px solid #eee; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="week-days"> <table> <tbody> <tr> <th></th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr class="day-list"> <th>0 - 4</th> <td>Item 1</td> <td>Item 7</td> <td>Item 13</td> <td>Item 19</td> <td>Item 25</td> </tr> <tr class="day-list"> <th>4 - 8</th> <td>Item 2</td> <td>Item 8</td> <td>Item 14</td> <td>Item 20</td> <td>Item 26</td> </tr> <tr class="day-list"> <th>8 - 12</th> <td>Item 3</td> <td>Item 9</td> <td>Item 15</td> <td>Item 21</td> <td>Item 27</td> </tr> <tr class="day-list"> <th>12 - 16</th> <td>Item 4</td> <td>Item 10</td> <td>Item 16</td> <td>Item 22</td> <td>Item 28</td> </tr> <tr class="day-list"> <th>16 - 20</th> <td>Item 5</td> <td>Item 11</td> <td>Item 17</td> <td>Item 23</td> <td>Item 29</td> </tr> <tr class="day-list"> <th>20 - 24</th> <td>Item 6</td> <td>Item 13</td> <td>Item 18</td> <td>Item 24</td> <td>Item 30</td> </tr> </tbody> </table> </div>
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.