@fortawesome/free-solid-svg-icons#faCalendarAlt JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCalendarAlt.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: faLibrary.js From cosmoscan-front with Apache License 2.0 | 6 votes |
|
library.add( faBars, faTimes, faChevronDown, faChevronUp, faCalendarAlt, faTelegramPlane, faTwitter, faMediumM, faRedditAlien, faQuestionCircle, faCheck, faSearch, );
Example #2
| Source File: button-icon.js From ofbiz-ui with Apache License 2.0 | 6 votes |
|
iconController() {
switch (this.elemName) {
case 'project':
this.faIcon = faCalendarAlt;
break;
case 'crm':
this.faIcon = faUsers;
break;
case 'cms':
this.faIcon = faCubes;
break;
case 'marketdata':
this.faIcon = faPoll;
break;
case 'sfa':
this.faIcon = faMagic;
break;
case 'marketing':
this.faIcon = faAt;
break;
case 'object dist':
this.faIcon = faNetworkWired;
break;
default:
this.faIcon = faFileInvoice;
}
}
Example #3
| Source File: index.js From Website with Apache License 2.0 | 4 votes |
|
export default function Downloads() {
const [releases, setReleases] = useState([]);
useEffect(() => {
async function getReleases() {
const response = await fetch(
"https://api.github.com/repos/PGMDev/PGM/releases"
);
return setReleases(await response.json());
}
getReleases();
}, []);
return (
<Layout title="Downloads">
<div className={classnames("container", styles.downloads_container)}>
<h1 className={styles.downloads_title}>Downloads</h1>
{releases.length === 0 ? (
<div className={classnames("hero", styles.spinner_hero)}>
<div className={styles.lds_ripple}>
<div></div>
<div></div>
</div>
</div>
) : (
<div
className={classnames(
"hero",
styles.downloads_hero,
styles.appearing
)}
>
<div className="container row">
<div className="col">
<div className="row">
<img src="/img/shield.png" className={styles.pgm_logo} />
<div className={styles.pgm}>
<h1>PGM {releases[0].name}</h1>
<p>
<label>
{" "}
{format(
new Date(releases[0].published_at),
"LLLL do, yyyy"
)}{" "}
</label>
</p>
<a href={releases[0].html_url}>
Changelog <FontAwesomeIcon icon={faAngleRight} />
</a>
</div>
</div>
<div className={styles.description}>
<p>
Minecraft multiplayer game-server suite for managing PvP
matches across various gamemodes
</p>
</div>
</div>
<div className={classnames("col col--4", styles.col_border)}>
<h2>Download PGM</h2>
<p>
PvP Game Manager (PGM) is a plugin that manages running and
instancing multiple PvP maps across various gamemodes for
Minecraft multiplayer.
</p>
<a
className={classnames(
"button button--primary",
styles.download_button
)}
href={releases[0].assets[0].browser_download_url}
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
<div className={classnames("col col--4", styles.col_margin_left)}>
<h2>Download SportPaper</h2>
<p>
SportPaper is a Minecraft server jar based on Paper 1.8 tuned
for maximum performance and high intensity PvP. It is
mandatory and should run alongside PGM.
</p>
<a
className={classnames(
"button button--primary",
styles.download_button
)}
href={releases[0].assets[1].browser_download_url}
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
</div>
</div>
)}
<div className={styles.others}>
<h2 style={{ marginBottom: "-15px" }}>Other Resources</h2>
<div className="row">
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faCalendarAlt} />
</h1>
<div className={styles.others_header}>
<h2>Events</h2>
<a href="https://github.com/PGMDev/Events/">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://github.com/PGMDev/Events/releases/latest"
>
Download <FontAwesomeIcon icon={faArrowDown} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
Events is the official PGM plugin for managing PvP matches
in a competitive setting. Upon joining or cycling, all
team members are forced onto their respective teams.
</p>
</div>
</div>
</div>
</div>
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faUsers} />
</h1>
<div className={styles.others_header}>
<h2>Community</h2>
<a href="https://github.com/PGMDev/Community/">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<button
className={classnames(
"button disabled button--primary",
styles.others_button
)}
>
Coming Soon <FontAwesomeIcon icon={faArrowDown} />
</button>
</div>
</div>
<div className={styles.others_description}>
<p>
Community is a standalone plugin for managing PGM servers.
It includes various PGM features, such as punishments,
moderation, freezing and other aspects.
</p>
</div>
</div>
</div>
</div>
</div>
<hr style={{ marginTop: "40px", marginBottom: "10px" }} />
<div className="row">
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faFolderOpen} />
</h1>
<div className={styles.others_header}>
<h2>ResourcePile</h2>
<a href="https://github.com/MCResourcePile">
<label>GitHub</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://mcresourcepile.github.io"
>
Visit <FontAwesomeIcon icon={faFolderOpen} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
ResourcePile is a community project which aims to provide
various collections of resources, such as maps or
statistics, for users with backgrounds in Overcast and
similar networks.
</p>
</div>
</div>
</div>
</div>
<div className={classnames("col col--6", styles.column)}>
<div className={classnames("hero", styles.others_hero)}>
<div className="col">
<div className="row">
<div className="col col--6">
<div className="row">
<h1 className={styles.others_icon}>
<FontAwesomeIcon icon={faCompass} />
</h1>
<div className={styles.others_header}>
<h2>PGM Tracker</h2>
<a href="https://pgm.fyi">
<label>Website</label>
</a>
</div>
</div>
</div>
<div className="col col--6">
<a
className={classnames(
"button button--primary",
styles.others_button
)}
href="https://pgm.fyi"
>
Visit <FontAwesomeIcon icon={faCompass} />
</a>
</div>
</div>
<div className={styles.others_description}>
<p>
PGM Tracker is a community tool made by{" "}
<a href="https://github.com/applenick">applenick</a> that
tracks public PGM servers. Take a look at it, play a
variety of Minecraft PvP maps and get involved with
development!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
Example #4
| Source File: TagsBlock.jsx From movies with MIT License | 4 votes |
|
function TagsBlock({ t, data }) {
const {
production_countries, genres, release_date, runtime
} = data;
if (
(production_countries.length < 1) &&
(genres.length < 1) &&
!release_date &&
!runtime
) return null;
const getDuration = (mins) => {
const h = Math.floor(mins / 60);
let m = mins % 60;
m = m < 10 ? `0${m}` : m;
return `${h}${t('movie_details.duration.hours')} ${m}${t('movie_details.duration.minutes')}`;
};
const getReleaseDate = (val) => val.split('-').reverse().join('.');
const mapWithSemicolons = (list) => list.map((item, index) => {
const value = (
<span className="tag-value">
{capitalize(item.name)}
</span>
);
return (
<Fragment key={`${index}_${item.name}`}>
{index !== (list.length - 1)
? (
<>
{value}
<span className={styles.tagSemicolon}>,</span>
</>
)
: value}
</Fragment>
);
});
const tags = [];
const fields = [
{
value: genres, icon: faVideo, func: mapWithSemicolons, cls: styles.tagGenres
},
{
value: production_countries, icon: faGlobe, func: mapWithSemicolons, cls: 'countries'
},
{
value: release_date, icon: faCalendarAlt, func: getReleaseDate, cls: 'release-date'
},
{
value: runtime, icon: faHistory, func: getDuration, cls: 'runtime'
},
];
fields.forEach(({
value, icon, cls, func
}) => {
if (!isEmpty(value)) {
tags.push({ icon, cls, text: func(value) });
}
});
return (
<div className={styles.tagsBlock}>
{tags.map((item, index) => (
<span
key={`${index}_${item.text}`}
className={cn(styles.tagItem, item.cls)}
>
<FontAwesomeIcon
className={styles.tagIcon}
icon={item.icon}
/>
<span className={styles.tagText}>
{item.text}
</span>
</span>
))}
</div>
);
}
Example #5
| Source File: Forms.js From volt-react-dashboard with MIT License | 4 votes |
|
GeneralInfoForm = () => {
const [birthday, setBirthday] = useState("");
return (
<Card border="light" className="bg-white shadow-sm mb-4">
<Card.Body>
<h5 className="mb-4">General information</h5>
<Form>
<Row>
<Col md={6} className="mb-3">
<Form.Group id="firstName">
<Form.Label>First Name</Form.Label>
<Form.Control required type="text" placeholder="Enter your first name" />
</Form.Group>
</Col>
<Col md={6} className="mb-3">
<Form.Group id="lastName">
<Form.Label>Last Name</Form.Label>
<Form.Control required type="text" placeholder="Also your last name" />
</Form.Group>
</Col>
</Row>
<Row className="align-items-center">
<Col md={6} className="mb-3">
<Form.Group id="birthday">
<Form.Label>Birthday</Form.Label>
<Datetime
timeFormat={false}
onChange={setBirthday}
renderInput={(props, openCalendar) => (
<InputGroup>
<InputGroup.Text><FontAwesomeIcon icon={faCalendarAlt} /></InputGroup.Text>
<Form.Control
required
type="text"
value={birthday ? moment(birthday).format("MM/DD/YYYY") : ""}
placeholder="mm/dd/yyyy"
onFocus={openCalendar}
onChange={() => { }} />
</InputGroup>
)} />
</Form.Group>
</Col>
<Col md={6} className="mb-3">
<Form.Group id="gender">
<Form.Label>Gender</Form.Label>
<Form.Select defaultValue="0">
<option value="0">Gender</option>
<option value="1">Female</option>
<option value="2">Male</option>
</Form.Select>
</Form.Group>
</Col>
</Row>
<Row>
<Col md={6} className="mb-3">
<Form.Group id="emal">
<Form.Label>Email</Form.Label>
<Form.Control required type="email" placeholder="[email protected]" />
</Form.Group>
</Col>
<Col md={6} className="mb-3">
<Form.Group id="phone">
<Form.Label>Phone</Form.Label>
<Form.Control required type="number" placeholder="+12-345 678 910" />
</Form.Group>
</Col>
</Row>
<h5 className="my-4">Address</h5>
<Row>
<Col sm={9} className="mb-3">
<Form.Group id="address">
<Form.Label>Address</Form.Label>
<Form.Control required type="text" placeholder="Enter your home address" />
</Form.Group>
</Col>
<Col sm={3} className="mb-3">
<Form.Group id="addressNumber">
<Form.Label>Number</Form.Label>
<Form.Control required type="number" placeholder="No." />
</Form.Group>
</Col>
</Row>
<Row>
<Col sm={4} className="mb-3">
<Form.Group id="city">
<Form.Label>City</Form.Label>
<Form.Control required type="text" placeholder="City" />
</Form.Group>
</Col>
<Col sm={4} className="mb-3">
<Form.Group className="mb-2">
<Form.Label>Select state</Form.Label>
<Form.Select id="state" defaultValue="0">
<option value="0">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</Form.Select>
</Form.Group>
</Col>
<Col sm={4}>
<Form.Group id="zip">
<Form.Label>ZIP</Form.Label>
<Form.Control required type="tel" placeholder="ZIP" />
</Form.Group>
</Col>
</Row>
<div className="mt-3">
<Button variant="primary" type="submit">Save All</Button>
</div>
</Form>
</Card.Body>
</Card>
);
}
