I'm using angular calendar, and I want to customize the events style,for example- to change their shape to square instead of circle.
I tried this code:
<mwl-calendar-month-view [eventTitleTemplate]="customEventsStyle" [locale]="locale" [viewDate]="viewDate" [events]="events" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClick($event)">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'Es' }}
</mwl-calendar-month-view>
<ng-template #customEventsStyle let-event="event">
<div class="cal-events">
<p style="background-color: brown;">{{event.title}}</p>
</div>
</ng-template>
But it didn't change anything in the style.
I also tried to change the css file in this path:
"../node_modules/angular-calendar/css/angular-calendar.css"
I changed the style of the .cal-month-view .cal-event class, but nothing happend.
I'm new for this issue, I'll be thankful if you could help me.
Thank you
I found it out!
I just added this code into the custom template instead of the div:
<ng-template #customCellTemplate let-day="day">
<mat-list *ngFor="let e of day.events">
<button class="customEvent" (click)="eventClick(e)">
{{e.title}}
</button>
</mat-list>
</ng-template>
<mwl-calendar-month-view [cellTemplate]="customCellTemplate"> ect...
Thanks
Related
Here is my checkbox in angular and i want to prevent the default behaviour of it.
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">Name</mat-checkbox>
Here whenever i click on name label...the checkbox gets toggled which i do not want to..
How can i prevent this from toggling when click on label . I have tried all others post too but I could not come up with the solution . I can not use jQuery.
Based on #Mike S. comment:
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
<span (click)="myCheck($event)">Name</span>
</mat-checkbox>
in your component typescript code:
myCheck(event) {
event.preventDefault();
//YOUR LOGIC
}
you need to add label after completing the <mat-checkbox> tag.
According to your design, you can add style to the <mat-label>
Replace your line of code with the below shown code:
<div layout=row>
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
<mat-label> Name </mat-lable>
</div>
above image is generated by below code
<div align="left" class="user-modified-rule">
<div layout="row">
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
</mat-checkbox>
<mat-label>
<rule></rule>
</mat-label>
</div>
</div>
and css code
.user-modified-rule {
display: inline-block;
width : 48%;
}
I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>
I would like to display a calendar to the mat-menu, because I want to look like airbnb, where you click a button and the calendar is being opened, but the calendar is not being displayed.
This is the code:
<div fxFlex="0 1 auto">
<button mat-raised-button [matMenuTriggerFor]="dateRangeMenu">
{{startEndDate}}
</button>
<mat-menu #dateRangeMenu="matMenu" [overlapTrigger]="false">
<aa-animatepicker [options]="datepickerOptions" [(selectedDates)]="dates"
(click)="$event.stopPropagation()">
</aa-animatepicker>
</mat-menu>
</div>
Does anybody know how to accomplish this?
You should use
<ng-template matMenuContent>
if you want to incorporate datepicker in mat-menu.
I'm trying to make an ugly file upload button look like a nice font awesome icon.
Here is what I have so far:
<div class="col-12 col-md-4">
<button type="button" class="btn btn-round mt-0 mb-0 uploadMediaTrigger" data-toggle="modal" data-target="#uploadMedia" rel="tooltip" data-placement="top" title="Upload Media">
<i class="far fa-images"></i>
</button>
{{ form_widget(postForm.file, { 'attr': {'class': 'far fa-images'} } ) }}
</div>
Do you know how I can get the ugly button to look like the font awesome icon? Seems like merely adding the font awesome classes doesn't work.
Here is a picture:
Check this answer with Form Themes and Form Extensions. This solution is compatible with Symfony 2.8.x and 4.x.
Can I put html inside a Symfony form button with Twig?
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.