0
How could I do in a user control of Visual Studio a screen similar to this image below, in a ASCX(HTML,CSS,JS):
I tried with several <div>, but I think it would be a very long processing, besides what I think is possible to do with very few lines..
I also use the Devexpress to help some enlightened!
1
If I understand your problem, you are having difficulty generating html, css, js and not necessarily a problem with UserControl. I don’t have much knowledge of microsoft tools, but since the problem is more with html, css and js so I’ll try to formulate an answer.
I’m going to say something that I think is important to "discuss" here, everyone thinks that in Webstandards or tableless is the disuse of tables in favor of Ivs and others. But actually the tableless refers to the wrong disuse (not semantic) of the tables, examples of where to use and not use:
I won’t go into too much detail, but looking at your drawing looks like a fully tabular structure, so you should use <table>, <tr>, <th>, <td>, etc..
An example would be like this:
.minhatabela th, .minhatabela td {
border: 1px #ccc solid;
}<table class="minhatabela">
<thead>
<tr>
<th>Todos</th>
<th>00:00</th>
<th>01:00</th>
<th>02:00</th>
<th>03:00</th>
<th>04:00</th>
<th>05:00</th>
<th>06:00</th>
<th>07:00</th>
<th>08:00</th>
<th>09:00</th>
<th>10:00</th>
<th>11:00</th>
<th>12:00</th>
<th>13:00</th>
<th>14:00</th>
<th>15:00</th>
<th>16:00</th>
<th>17:00</th>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
<th>21:00</th>
<th>22:00</th>
<th>23:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Domingo</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Segunda</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Terça</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Quarta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Quinta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Sexta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Sabado</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>However I believe you also want the effect of selecting the table cells, a good example is the code used in this question on soen, would look like this:
$(function () {
var table = $('.minhatabela');
var cells = $('.minhatabela td:not(:first-child)');
cells.mousedown(function () {
cells.removeClass('selected');
var start = {
x: this.cellIndex,
y: this.parentNode.rowIndex
}
cells.mouseover(function () {
var x1 = Math.min(start.x, this.cellIndex);
var y1 = Math.min(start.y, this.parentNode.rowIndex);
var x2 = Math.max(start.x, this.cellIndex);
var y2 = Math.max(start.y, this.parentNode.rowIndex);
cells.each(function () {
var x = this.cellIndex;
var y = this.parentNode.rowIndex;
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
});
$(document).mouseup(function () {
cells.unbind('mouseover');
$(document).unbind('mouseup');
});
});
});.minhatabela th, .minhatabela td {
border: 1px #ccc solid;
border:1px solid #ddd;
height:30px;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
.minhatabela .selected {
background-color: #fc0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="minhatabela">
<thead>
<tr>
<th>Todos</th>
<th>00:00</th>
<th>01:00</th>
<th>02:00</th>
<th>03:00</th>
<th>04:00</th>
<th>05:00</th>
<th>06:00</th>
<th>07:00</th>
<th>08:00</th>
<th>09:00</th>
<th>10:00</th>
<th>11:00</th>
<th>12:00</th>
<th>13:00</th>
<th>14:00</th>
<th>15:00</th>
<th>16:00</th>
<th>17:00</th>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
<th>21:00</th>
<th>22:00</th>
<th>23:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Domingo</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Segunda</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Terça</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Quarta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Quinta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Sexta</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Sabado</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>0
Friend, once I had to develop something similar, but much less complex, I used a table, and in the core I put a Datalist, the cool of the datalist is that in each Itemtemplate you have freedom to put HTML or ASP elements. This way it can be easier to control events, even without using javascript. Take a look here at documentation and see if it helps you a little.
0
Renan, in this case you need to create a table.
On the first line you will put the schedules(12.2.4.6.8, etc.) in a thead.
In the second row you will put, in the first column, the days of the week(All, Sunday, Monday, etc) and the other columns will serve to leave the gaps for the user to click and leave marked.
When the user clicks on the field you will need capture this event in Javascript and record somewhere, either with a service via Ajax, localStorage, Cookies, etc..
Take a look at the code of those calendars for you to have a basis more or less of how to do. Here also has an example up with Datepicker if you’re interested.
I hope I helped. D
Hello, it was a great help to your response! But I’m still stuck at the part where I capture the event.. How could I do this by javascript for each clicked field? Because after clicking the Save button, it will include to sql for me each value, within the day of the week..
Browser other questions tagged javascript html css asp.net devexpress
You are not signed in. Login or sign up in order to post.
You mean the days of the week and the times at the top?
– Guilherme Nascimento