style calendar step

src/app/core/services/poll.service.ts

@@ -48,6 +48,7 @@ export class PollService implements Resolve<Poll> {
 	public allowSeveralHours = false;
 	public richTextMode = false;
 	public calendar: Date[] = [new Date()];
+	public disabled_dates: Date[] = [];
 
 	constructor(
 		private http: HttpClient,
@@ -71,6 +72,10 @@ export class PollService implements Resolve<Poll> {
 			this.DateUtilitiesService.addDaysToDate(2, new Date()),
 			this.DateUtilitiesService.addDaysToDate(3, new Date()),
 		];
+		// disable days before today
+		for (let i = 1; i < 31; i++) {
+			this.disabled_dates.push(this.DateUtilitiesService.addDaysToDate(-i, new Date()));
+		}
 		if (environment.autofill_creation) {
 			this.setDemoValues();
 			this.toastService.display('auto fill de création fait');

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -6,18 +6,23 @@
 		{{ pollService.calendar.length }}
 	</span>
 	<span> - {{ 'dates.count_dates' | translate }} </span>
-	<div class="calendar">
+
+	<div class="calendar" *ngIf="mode_calendar">
 		<p-calendar
 			[(ngModel)]="pollService.calendar"
-			firstDayOfWeek="5"
+			firstDayOfWeek="1"
 			selectionMode="multiple"
 			inputId="multiple"
 			showButtonBar="true"
 			[locale]="'calendar_widget' | translate"
+			[disabledDates]="pollService.disabled_dates"
 			[inline]="true"
-			[showWeek]="true"
+			[showWeek]="false"
 		></p-calendar>
 	</div>
+	<button class="button" (click)="mode_calendar = !mode_calendar" [ngClass]="{ 'is-primary': !mode_calendar }">
+		Saisir les dates manuellement
+	</button>
 </div>
 <div class="columns">
 	<div class="column">
@@ -32,6 +37,9 @@
 					<i class="fa fa-plus" aria-hidden="true"></i>
 					{{ 'dates.add_time' | translate }}
 				</button>
+				<button class="button" (click)="pollService.allowSeveralHours = !pollService.allowSeveralHours">
+					Horaires différentes pour chaque jour
+				</button>
 				<button
 					(click)="pollService.removeAllTimes()"
 					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"

src/app/features/administration/form/steps/step-three/step-three.component.ts

@@ -12,6 +12,7 @@ export class StepThreeComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
+	public mode_calendar = true;
 
 	constructor(public pollService: PollService) {
 		this.pollService.step_current = 3;

src/assets/i18n/FR.json

@@ -596,7 +596,7 @@
 		"SV": "sv"
 	},
 	"calendar_widget": {
-		"startsWith": "Starts with",
+		"startsWith": "Commence par",
 		"contains": "Contains",
 		"notContains": "Not contains",
 		"endsWith": "Ends with",
@@ -607,21 +607,21 @@
 		"lte": "Less than or equal to",
 		"gt": "Greater than",
 		"gte": "Great then or equals",
-		"is": "Is",
+		"is": "Est",
-		"isNot": "Is not",
+		"isNot": "N'est pas",
-		"before": "Before",
+		"before": "Avant",
-		"after": "After",
+		"after": "Après",
-		"clear": "Clear",
+		"clear": "Vider",
-		"apply": "Apply",
+		"apply": "Appliquer",
 		"matchAll": "Match All",
 		"matchAny": "Match Any",
 		"addRule": "Add Rule",
 		"removeRule": "Remove Rule",
-		"accept": "Yes",
+		"accept": "Oui",
-		"reject": "No",
+		"reject": "Non",
-		"choose": "Choose",
+		"choose": "Choisir",
 		"upload": "Upload",
-		"cancel": "Cancel",
+		"cancel": "Annuler",
 		"dayNames": [
 			"Sunday",
 			"Monday",
@@ -632,21 +632,21 @@
 			"Saturday"
 		],
 		"dayNamesShort": [
-			"Sun",
+			"Dim",
-			"Mon",
+			"Lun",
-			"Tue",
+			"Mar",
-			"Wed",
+			"Mer",
-			"Thu",
+			"Jeu",
-			"Fri",
+			"Ven",
-			"Sat"
+			"Sam"
 		],
 		"dayNamesMin": [
-			"Su",
+			"Di",
-			"Mo",
+			"Lu",
-			"Tu",
+			"Ma",
-			"We",
+			"Me",
-			"Th",
+			"Je",
-			"Fr",
+			"Ve",
 			"Sa"
 		],
 		"monthNames": [

src/styles/partials/_forms.scss

@@ -266,9 +266,16 @@ mat-checkbox {
 
 // calendar primeng
 .p-datepicker {
-	border: solix 1px $logo_color;
+	border: solid 1px $logo_color;
+	padding: 0.5em;
 	margin: 1em auto;
 
+	button {
+		border: solid 1px $primary_color;
+	}
+	.p-datepicker-buttonbar {
+		margin-top: 0.5em;
+	}
 	.pi-chevron-left:after {
 		content: '<';
 	}
@@ -307,6 +314,21 @@ mat-checkbox {
 		color: $white;
 		border-radius: 100%;
 	}
+	.p-disabled {
+		background: $d-grey;
+		color: $grey;
+	}
+	.p-datepicker-other-month {
+		color: white;
+	}
+	// weekend days
+	tr > td {
+		&:nth-of-type(6),
+		&:nth-of-type(7) {
+			//border-left: 1px solid $border-color;
+			background: $grey;
+		}
+	}
 }
 
 .advanced-config {