Catálogo de componentes - Junta de Castilla y León
Menu jcyl.es
Mi cuenta
Guía de estilos y componentesde la Junta de Castilla y León
Redes sociales
Calendario
Completo
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Histórico de convocatorias
Eventos
-
20 de febrero de 2017 10:30h
Convocatoria de prensa
CONSEJERÍA DE FOMENTO Y MEDIO AMBIENTE
Miranda de Ebro, Burgos. C/ Bilbao esquina con C/ Real Aquende
-
20 de febrero de 2017 10:30h
Convocatoria de prensa
CONSEJERÍA DE EDUCACIÓN
Valladolid. Cortes de Castilla y León. Sala de usos múltiples. Plaza de las Cortes de Castilla y León, 1.
-
20 de febrero de 2017 10:30h
Convocatoria de prensa
CONSEJERÍA CULTURA Y TURISMO
Salamanca. Universidad de Salamanca. Patio de Escuelas Menores.
La consejera de Cultura y Turismo, María Josefa García Cirac, inaugura la exposición 'Transliteral'.
-
20 de febrero de 2017 10:30h
Presidente de la Junta de Castilla y León
Valladolid. Presidencia de la Junta de Castilla y León. Sala de Mapas.
LEl presidente de la Junta de Castilla y León, Juan Vicente Herrera, preside la reunión del Grupo de Trabajo de Emigración. Los gráficos podrán tomar imágenes al inicio. Al término, a las 13.00 horas, el vicepresidente y consejero de la Presidencia, José Antonio de Santiago-Juárez, atenderá a los medios de comunicación en la sala de prensa del edificio A.
Página 1 de 3
Responsividad
La parte del búsqueda del componente, calendario y selector de fechas se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.
La parte de resultados, como texto que es, fluirá ocupando todo el ancho disponible.
La paginación fluira centrada y e línea según el espacio disponible.
Código
<div class="calendario">
<table>
<caption>[Mes]</caption>
<tr>
<th abbr="Lunes">lu</th>
<th abbr="Martes">ma</th>
<th abbr="Miércoles">mi</th>
<th abbr="Jueves">ju</th>
<th abbr="Viernes">vi</th>
<th abbr="Sábado">sá</th>
<th abbr="Domingo">do</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="actual">9</td>
<td>10</td>
<td class="seleccionado">11</td>
<td>12</td>
<td class="actual seleccionado">13</td>
<td>14</td>
<td><a href="">15</a></td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="calendario-buscador">
<h2>Histórico de convocatorias</h2>
<form action="" method="post">
<fieldset>
<legend>Selecciona mes y año</legend>
<label for="mes" class="elemento-invisible">Mes</label>
<select id="mes">
<option value="[Mes]">[Mes]</option>
[Meses]
</select>
<label for="anyo" class="elemento-invisible">Año</label>
<select id="mes">
<option value="[Año]">[Año]</option>
[Años]
</select>
</fieldset>
<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
</form>
</div>
<div class="calendario-resultados">
<h3>Eventos</h3>
<ul>
<li>
<p class="fecha">
<span class="dia">[Fecha]</span>
<span class="hora">[Hora]</span>
</p>
<p class="tipo">[Tipo]</p>
<p>[Texto]</p>
[Más texto]
</li>
</ul>
</div>
</div>
<div class="paginacion">
<p>Página X de Y</p>
<ul>
<li class="primera"><a href=""><span class="elemento-invisible">Primera página</span><<</a></li>
<li class="anterior"><a href=""><span class="elemento-invisible">Página anterior</span><</a></li>
<li><a href=""><span class="elemento-invisible">Página </span>[X]</a></li>
<li class="siguiente"><a href=""><span class="elemento-invisible">Página siguiente</span>></a></li>
<li class="ultima"><a href=""><span class="elemento-invisible">Última página</span>>></a></li>
</ul>
</div>
Compacto
Enero
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Eventos del mes
Filtrar eventos
Responsividad
El calendario y los resultados se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.
Los botones se colocarán en línea por encima de 600px. Por debajo de 600px se colocará en dos líneas, en una los selectores y otra para el botón de buscar. Si los selectores no dispusiesen de espacio se colocarían cada uno en una fila.
Código
<div class="calendario mini">
<h2>[Mes]</h2>
<table>
<tr>
<th abbr="Lunes">lu</th>
<th abbr="Martes">ma</th>
<th abbr="Miércoles">mi</th>
<th abbr="Jueves">ju</th>
<th abbr="Viernes">vi</th>
<th abbr="Sábado">sá</th>
<th abbr="Domingo">do</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="actual">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="calendario-resultados">
<h3>Eventos del mes</h3>
<ul>
</ul>
</div>
<div class="calendario-buscador">
<h3 class="elemento-invisible">Filtrar eventos</h3>
<form action="[action]" method="post">
<fieldset>
<legend class="elemento-invisible">Selecciona mes y año</legend>
<label for="mes" class="elemento-invisible">Mes</label>
<select id="mes">
<option value="[Mes]">[Mes]</option>
[Meses]
</select>
<label for="anyo" class="elemento-invisible">Año</label>
<select id="mes">
<option value="[Año]">[Año]</option>
[Años]
</select>
</fieldset>
<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
</form>
</div>
</div>
Este buscador ejecuta una búsqueda por AJAX a la url indicada en el action del form.
El formato de JSON que espera recibir es el siguiente:
[
{
"fechaini": "2017-08-29 00:00:00.0",
"fechafin": "2017-09-03 00:00:00.0",
"texto": "XVIII FERIA DE ARTESANÍA DE PALENCIA. PALENCIA",
"dia": [
1,
2,
3
],
"href": ""
},
{
"fechaini": "2017-09-01 00:00:00.0",
"fechafin": "2017-09-01 00:00:00.0",
"texto": "XXXIX FERIA DE CERÁMICA Y ALFARERÍA DE VALLADOLID. VALLADOLID",
"dia": [
1
],
"href": ""
}
]
