style for calendar in step 3

src/app/app.component.ts

@@ -12,6 +12,7 @@ import { FramaKeyboardShortcuts } from './shared/shortcuts/main';
 import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts';
 import { PollService } from './core/services/poll.service';
 import { Poll } from './core/models/poll.model';
+import { PollDTO } from './core/models/poll.DTO.model';
 
 @Component({
 	selector: 'app-root',
@@ -42,7 +43,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 	printpath(parent: string, config: Route[]) {
 		for (let i = 0; i < config.length; i++) {
 			const route = config[i];
-			console.info(parent + '/' + route.path);
 			if (route.children) {
 				const currentPath = route.path ? parent + '/' + route.path : parent;
 				this.printpath(currentPath, route.children);
@@ -53,8 +53,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 	ngOnInit(): void {
 		this.printpath('', this.router.config);
 		this.router.events.subscribe((evt) => {
-			console.log('route changed', evt);
-
 			if (!(evt instanceof NavigationEnd)) {
 				return;
 			}

src/app/core/models/poll.DTO.model.ts

@@ -0,0 +1,46 @@
+import { Choice, ChoiceGroup } from './choice.model';
+import { DateChoice, TimeSlices } from './dateChoice.model';
+
+export class PollDTO {
+	menuVisible = true;
+	expiracyDateDefaultInDays;
+	deletionDateAfterLastModification;
+	pollType: string = 'date'; // classic or dates
+	title;
+	description;
+	myName;
+	myComment = '';
+	isAdmin; // when we create a poll; we are admin on it
+	myVoteStack;
+	myTempVoteStack;
+	myEmail;
+	myPolls; // list of retrieved polls from the backend api
+	allowSeveralHours;
+	visibility; // visible to one with the link:
+	voteChoices = 'yes; maybe; no'; // possible answers to a vote choice: only "yes"; "yes; maybe; no"
+	created_at;
+	expirationDate; // expiracy date
+	voteStackId; // id of the vote stack to update
+	pollId; // id of the current poll when created. data given by the backend api
+	pollSlug; // id of the current poll when created. data given by the backend api
+	currentPoll; // current poll selected with createPoll or getPoll of ConfigService
+	passwordAccess;
+	password;
+	customUrl; // custom slug in the url; must be unique
+	customUrlIsUnique; // given by the backend
+	urlSlugPublic;
+	urlPublic;
+	urlAdmin;
+	adminKey; // key to change config of the poll
+	owner_modifier_token; // key to change a vote stack
+	canModifyAnswers; // bool for the frontend selector
+	whoModifiesAnswers; // everybody; self; nobody (: just admin)
+	whoCanChangeAnswers; // everybody; self; nobody (: just admin)
+	dateList; // sets of days as strings; config to set identical time for days in a special days poll
+	timeList; // ranges of time expressed as strings
+
+	answers;
+	displayConfirmVoteModalAdmin;
+
+	constructor() {}
+}

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

@@ -491,6 +491,10 @@ export class PollService implements Resolve<Poll> {
 		return list;
 	}
 
+	convertCalendarDatesToChoices(array_dates) {
+		return array_dates;
+	}
+
 	newPollFromForm(form: any): any {
 		const newpoll = new Poll(
 			this.userService.getCurrentUser(),

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

@@ -78,9 +78,9 @@
 				[showWeek]="true"
 			></p-calendar>
 		</div>
-		<!--		<div class="debug">-->
+		<div class="debug">
-		<!--		<pre>{{pollService.calendar |json}}</pre>-->
+			<pre>{{ pollService.calendar | json }}</pre>
-		<!--		</div>-->
+		</div>
 	</div>
 </div>
 <div class="columns">

src/styles/partials/_forms.scss

@@ -235,3 +235,37 @@ mat-checkbox {
 	width: 100%;
 	padding: 1em;
 }
+
+// calendar primeng
+.p-datepicker {
+	border: solix 1px $logo_color;
+	margin: 1em auto;
+
+	.p-datepicker-month {
+		margin-right: 1em;
+	}
+	.p-datepicker-weeknumber span {
+		border-right: 1px solid $legend_color;
+	}
+	.p-datepicker-today span {
+		font-weight: bold;
+		border: solid 1px $legend_color;
+	}
+
+	.p-datepicker-calendar td span {
+		padding: 1em;
+		width: 3.5em;
+		transition: all ease 0.5s;
+		&:hover {
+			background: mix($white, $legend_color);
+			color: $white;
+			transition: all ease 0.2s;
+		}
+	}
+
+	.p-highlight {
+		background: $legend_color;
+		color: $white;
+		border-radius: 100%;
+	}
+}

src/styles/themes/_base.scss

@@ -2,7 +2,6 @@
 	background: $primary;
 
 	main {
-		padding: 0;
 		margin-bottom: 2em;
 		padding-bottom: 5em;
 		padding-top: 1em;