Angular 8 - Calendario
Publicado por Riley (4 intervenciones) el 02/03/2020 16:21:57
Buen dìa,
Tengo que reproducir éste calendario en Angular (ver ilustraciòn)
Yo he intentado hacerlo. De momento hice el intento de hacer el cuadro con de el calendario con (.less). y el resto con Angular. Tengo un problema con el cuadro no logro colocar los dias de manera vertical, cuando lo hago el cuadro de usuarios se coloca al lado de los dias. No logro dar con el porqué.No consigo imprimir automaticamente los 3 cuadritos de las tareas, asi aue los tuve aue colocar manualmente. Podria alguien ayudarme?
El programa que debo hacer es un calendario que muestre los dias de lunes a viernes, la lista de usuarios y sus posibles poryectos y en cada dia hay tres cuadros que representan las tareas especificas.
Si alguien tiene tiempo podria echarle un vistazo al codigo y darme algunos consejos.
PD. Recien estoy aprendiendo angular y less asi aue mis excusas si el codigo no es el mas eficiente y si el style de Css/Less no es el màs adecuado.
Gracias de antemano.
.html
.less
component.list.ts
days.ts
list.ts
mock-list.ts
Tengo que reproducir éste calendario en Angular (ver ilustraciòn)
Yo he intentado hacerlo. De momento hice el intento de hacer el cuadro con de el calendario con (.less). y el resto con Angular. Tengo un problema con el cuadro no logro colocar los dias de manera vertical, cuando lo hago el cuadro de usuarios se coloca al lado de los dias. No logro dar con el porqué.No consigo imprimir automaticamente los 3 cuadritos de las tareas, asi aue los tuve aue colocar manualmente. Podria alguien ayudarme?
El programa que debo hacer es un calendario que muestre los dias de lunes a viernes, la lista de usuarios y sus posibles poryectos y en cada dia hay tres cuadros que representan las tareas especificas.
Si alguien tiene tiempo podria echarle un vistazo al codigo y darme algunos consejos.
PD. Recien estoy aprendiendo angular y less asi aue mis excusas si el codigo no es el mas eficiente y si el style de Css/Less no es el màs adecuado.
Gracias de antemano.
.html
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
<ul >
<ul class="weekdays" *ngFor="let dlist of ldays"
[class.selected]="list === selectedList"
(click)="onSelect(list)">
<li>{{dlist.day}}</li>
</ul>
<li class="user-container" *ngFor="let list of lists"
[class.selected]="list === selectedList"
(click)="onSelect(list)">
<span class="box">{{list.name}}</span>
<div class="day-box">
<div class="day-box" *ngIf="taken !> 3">
<li class="taak1"></li>
<li class="taak1"></li>
<li class="taak1"></li>
</div>
<div class="day-box">
<li class="taak1"></li>
<li class="taak1"></li>
<li class="taak1"></li>
</div>
<div class="day-box">
<li class="taak1"></li>
<li class="taak1"></li>
<li class="taak1"></li>
</div>
</li>
</ul>
.less
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.user-container{
height: 33px;border-top: 1px solid #D9E4EB;
// border-bottom: 1px solid #D9E4EB; display: flex;margin-bottom: 0px;
margin-top: 0px;
}.box {
margin: 0px; padding: 0px; width: 140px;border-right: 1px solid #D9E4EB;
line-height: 32px;
text-align: center;
display: inline-block;
// float: left;}.day-box{
height: 33px; width: 90px; display: flex;border-right: 1px solid #D9E4EB;
margin-left: 10px;
}ul {list-style-type: none;}
.weekdays {
margin: 0; padding: 0px 0;margin-left: 140px;
// float: left; It goes to the left}.weekdays li {
width: 91px; height: 33px;line-height: 32px;
border-top: 1px solid #D9E4EB;
text-align: center;
// display: inline-block;border-right: 1px solid #D9E4EB;
margin-left: 10px;
// float: left; //without it goes back to vertical position}component.list.ts
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
32
import { Component, OnInit } from '@angular/core';
import { List } from '../list';
import { ListOfDays } from '../days';
import { LISTS } from '../mock-list';
import { WDAYS } from '../mock-list';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.less']
})
export class ListComponent implements OnInit { lists = LISTS; selectedList: List; taken = 0; ldays= WDAYS; selectedDays: ListOfDays;constructor() { }
ngOnInit() {
}onSelect(list: List): void {
this.selectedList = list;
this.taken++;
}}days.ts
1
2
3
4
export interface ListOfDays { id: number; day: string; }list.ts
1
2
3
4
export interface List { id: number; name: string; }mock-list.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { List } from './list';
import { ListOfDays } from './days';
export const LISTS: List[] = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Tom' },
{ id: 3, name: 'Bas' },
{ id: 4, name: 'Zoe' },
{ id: 5, name: 'Meg' },
{ id: 6, name: 'Lili' },
];export const WDAYS: ListOfDays[] = [
{ id: 1, day: 'Mon' },
{ id: 2, day: 'Tue' },
{ id: 3, day: 'We' },
{ id: 4, day: 'Th' },
{ id: 5, day: 'Fr' },
]Valora esta pregunta
0