#gonna post the blank version of this later as a little coloring page later once i have a few others drawn

[hollis-art]

taking a nice little stroll on the bottom of the ocean floor, as one does

[pixiemage]

5, 17, and 43 for the fic ask game!

[For the Fanfiction Writing Ask Game]

Three questions??? You spoil me! <3 I think I'll need a Read More for this one my friend xD

Hahaha! Ha! Ha.

Many. So, so many.

I have a bad habit of starting projects and not finishing them, so I have a plethora scattered throughout my Google Docs files that are anywhere from multiple pages of unposted fic, all the way down to single-sentence unused prompts. Sometimes I left them behind because I lost motivation, sometimes my hyperfixation shifted and I (sadly) couldn't focus on that fandom anymore.

But let's see...uh....I glanced through my older stuff first just to see. But for now I think I'm just gonna count what I'm either actively working on, or what I wish to continue when my motivation returns...because if you counted all the abandoned WIP's I've gathered over the years, I think the number would be close to 30, and I don't want to list them all up here. (Maybe I'll drop it at the bottom of this post if you're curious***)

For one, I have two IronDad fics I plan on finishing: one that's a shorter Mafia AU that's 2/3 complete, and a much longer (and heftier) multi-chapter fic that has been awaiting a new chapter for over a year I think. A Little Late On The Blood Work my beloved...I'll come back when I get inspiration again 🥺💞 I also have an old Jacksepticeye Egos fic called #SamLives that I've been wanting to continue for ages but haven't, along with a Night at the Museum fic (Jedtavius) that I at least need to finish the current arc for because the comment section is sad.

And MOST recently I've got a bunch for Hermitcraft/Empires/Traffic Life that I'm in the process of actively writing...which I believe add up to a total of six?? I think? THREE are partially posted/being updated (Through a Crack in the Void, Domino Effect, There's Not a Word Yet), and the OTHER three (two Team Rancher, one that's literally Every Ship Under The Sun With Some Found Family On Top) aren't gonna be on my plate until I finish some of the other ones.

17. Do you have a writing routine?

Not really! Usually once I get an idea, I just - jump in. If I get stuck and want to skip something just to keep the writing ball rolling, I'll throw one of these in the middle of the page: ASDJNAKFBEKAJBA ...and just leave it for later. It's bold, red, and easy to spot when I'm scrolling through a long document, which is nice! It helps make sure no blank spots get missed in editing! (I also red-dye words, sentences, or paragraphs I'm feeling shaky on, so I can spot them easily and come back later when I get a better idea to fix it.) And if I decide to completely change a section I'm writing, I'll often copy the original version, paste it at the bottom of the doc in case I decide to change it back, and turn it a pastel color so I don't confuse old versions for the current text.

I also sometimes make calendars on Excel/Sheets if I really wanna keep track of time, and I often have a separate (and somewhat disorganized) doc for Notes on my longer fics. There's also a document where I write down potential lyrics options for There's Not a Word Yet chapter titles, but that's the only time I've done that for a fic.

43. Is there a trope or idea that you’d really like to write but haven’t yet?

I feel like someone asked me this a while back, so I've definitely thought about this! But honestly? A mystery or a time-travel fix-it...which I am well aware are two VASTLY different tropes lmao.

I've always been envious and in awe of well-written mystery/detective stories, because so many little details go into them to make them work. I'd love to build one of my own someday, but I have yet to find the right motivation to do so.

As far as time-travel fix-its go...they're just...they're so fun to read, because I love to see how one little change can affect an entire timeline (see also: Domino Effect) but they're also a LOT of work to write because it involved basically retelling a story that's already been written but in your own words and with a twist. Somehow writing something fully original comes easier to me than trying to build my writing around something else that already exists. But god I'd love to have the motivation to write one of 'em anyway! It'd be fun to decide how everything changes all because of one little difference in choice :3

5. How many WIPs do you have?  What fandoms/pairings are they for?

Hahaha! Ha! Ha.

Many. So, so many.

I have a bad habit of starting projects and not finishing them, so I have a plethora scattered throughout my Google Docs files that are anywhere from multiple pages of unposted fic, all the way down to single-sentence unused prompts. Sometimes I left them behind because I lost motivation, though most times my hyperfixation shifted and I (sadly) couldn't focus on that fandom anymore.

But let's see...uh....I glanced through my older stuff first just to check for this hah. But for now I think I'm just gonna count what I'm either actively working on, or what I wish to continue when my motivation returns...because if you counted all the abandoned WIP's I've gathered over the years, I think the number would be close to 30, and I don't want to list them all up here. (But I'll drop it at the bottom of this post if you're curious***)

For one, I have two Marvel/IronDad fics I plan on finishing: one that's a shorter Mafia AU that's 2/3 complete, and a much longer (and heftier) multi-chapter fic that has been awaiting a new chapter for over a year I think. A Little Late On The Blood Work my beloved...I'll come back when I get inspiration again 🥺💞 I also have an old Jacksepticeye Egos fic called #SamLives that I've been wanting to continue for ages but haven't, along with a Night at the Museum fic (Jedtavius) that I at least need to finish the current arc for because the comment section is sad.

And MOST recently I've got a bunch for Hermitcraft/Empires/Traffic Life that I'm in the process of actively writing...which I believe add up to a total of six?? I think? THREE are partially posted/being updated (Through a Crack in the Void, Domino Effect, There's Not a Word Yet), and the OTHER three (two Team Rancher, and one that's literally Every Ship Under The Sun With Some Found Family On Top) aren't gonna be on my plate until I finish some of the other ones.

(One of them is a cute 5+1 one-shot about Tango calling Jimmy "buddy" and Jimmy learning that "buddy" has a lot of different meanings depending on how Tango says it and who he's saying it to. The second one is an extension of a one-shot I already posted called Coming, Coming Home, where S8 HASA!Tango crash-lands in the mesa outside Tumble Town, and like - yeah. Yeah. I'd love to continue that one. And the LAST one is a Double-Life-based Witches/Familiars AU that started as Renchanting Duo and has since extended to every member of the Life series and even some Hermits.)

***ALL THE OLDER FICS I HAVE YET TO COMPLETE: I've got one for Doctor Who, a handful for JSE Egos - #SamLives - one for Night at the Museum, one for Encanto. Six for Marvel/IronDad (including a Mafia fic, a SPN AU, a Peter-gets-shot and Tony-goes-dad-mode hurt/comfort, and A Little Late On the Blood Work which as I said I'm just longing to get inspiration to return to). A witch/familiar Supernatural AU fic and an SPN time travel fix-it that I barely started. There's a TangoTek one-shot I've abandoned featuring his rage moments from both LL and DL. I also have an old fic from high school for a game called Ib that I'd love to revamp someday...and my Original FanFic that started it all, which was for Harry Potter, and I was like 12, and it will never EVER see the light of day. My god. It's...it's rough.

[dangoghz]

legitimate advice for new phandom blogs

hey !! so i know sometimes posts like ‘RULES FOR THE PHANDOM XD’ are made and they’re all like “numba one. dan is a squishy bean respect this uwu” but this isn’t gonna be like that lol. im just going to list a few actual things that might help people new to the phandom learn about and become integrated into the community! of course these aren’t ‘rules’ and u dont have to listen to any of it ofc,,, im not here to control ur blog, just here to say what people normally do. feel free to rb whether u are a new blog or not, ill appreciate it either way!

(NOTE: PLS TELL ME IF ANY OF THE LINKS DONT WORK AND ILL FIX THEM PERIODICALLY!)

italicized text is defined in the glossary at the bottom!

1. be interactive! 

here, unique to our corner of timmy darn communism, we have a lot of like virtual traditions that everyone knows. these help you to make friends and also grow ur blog with some new mutuals. here are some examples.

networks: networks, or nets, are a sort of selective gc, usually with a theme or concept that it’s based around, in which all who wish to be part of fill out an application form that determines whether they get in. this is kinda the one with the most work, as u also have to make a group blog and info post, but it’s definitely worth it. i have made my closest friends in nets (such as @phleurnet which i birthed), and a lot of people on here would say the same. if you want to know more or apply, my friend diana runs an update blog @phandomnets! (examples, these are all open btw: x x x)

meetups: meetups are not in real life, don’t worry. a meetup is when someone organizes a specific time at which we all post thing around a certain theme! for instance, on halloween on tuesday, my friend milo hosted a halloween meetup. usually people post selfies but if u are uncomfortable with that, u can post art, music, or anything else related to the theme. a blog called @phandommeetupwatch keeps track of these! (examples, all happening soon/just happened: x x x)

follow forevers: a follow forever is a big celebration post when u reach a follower count milestone, no matter 50 or 5k. u tag all of the blogs you love, and they reblog it to appreciate u! it’s really positive and shows people how their work has paid off. usually people are tagged in alphabetical order, and sometimes people bold their favorites but the stylization is up to u. (recent examples: x x x)

milestone activities: sometimes people do things for their followers when they reach a follower count that involves their followers requesting something! there are many many forms of this type of thing. a common one is blog rates, in which there is a set template and the blogger rates each blog that sends in an ask using the template (info post ex: x; rate ex: x). there are also url edits (x), name/url moodboards (x), and more. u can certainly come up w an idea of ur own, being creative is great!

talk to people: that’s right dude!!! ye!!! u can message a blog u think is cool, or send an ask if u think something they made or are talking about is interesting, or add something sweet in the tags (more on etiquette later) when u rb their post. additionally, sometimes people stir up discourse, and u should participate in it if u want (past discourse examples: x x). u can also send asks when people reblog ask games, which are a list of questions with a theme (new one of mine ex: x). 

2. play around with your blog!

customizing your blog can start giving you what we call a branding, making you distinguished from other bloggers. this can include everything from as simple as using an icon to coding your own about page. 

themes: a blog can be way more appealing if it is aesthetically pleasing. admittedly, i often follow people just because of the smoothness of their mobile theme. a mobile theme is rather easy to construct as u can do it on ur own with a phone. it is how ur blog looks on a phone. although u don’t have to do this, i recommend sticking to two to four colors on ur theme and avoiding stuffing it with a lot of bright things because it can distract from content. additionally, bloggers often make their descriptions short and succinct. (my fav mobiles: x x x.) on a pc, your blog theme can be customized completely on html, meaning there is a lot of freedom. u don’t have to learn to code for this, bc u can find free themes anywhere, just search ‘free tumblr themes’ on google. once again, be creative, but u shouldn’t overload. (my fav pcs: x x x.)

about pages: in order to avoid chunky descriptions but still let people know the key deets about themselves, bloggers create about pages. sometimes these bout pages are uncoded but u can also use html code if u want to. some common things in an about page are interests, maybe personality types/horoscopes/hogwarts houses, original content, and links to other social media. (examples: x x x)

urls: urls are a key part of your blog’s brand. ‘rebranding’ is what people say if they change their url! if u are tired or bored with your url, changing it is an opportunity to change your theme and other parts of ur blog as well. (url change ex: x). 

saved urls: saved urls are basically when bloggers hoard sideblogs in order to reserve the urls used for them. if you ever encounter a blank blog that has ‘saved’ as its title, that’s probably it. sometimes people like to give away their urls, either as a constant thing (ex: x) or by doing a url giveaway (x). either way, it’s a good opportunity to change it up!

tags: in order to keep their blog cleancut and organized, a lot of bloggers have special tags for certain people, certain topics, and/or certain types of media. many people in the phandom particularly have tags for dan and phil that match (strawberries and cream, lune and sole, etc). if they have many of these tags, there can be a page for their tags on their blog. this page can be coded with special html or just a regular tumblr page, it doesn’t really matter. but it’s very useful for those who visit your blog, and makes it easy for u to navigate older posts as well! (examples: x x x)

3. learn to make og content!

producing original content helps you establish what your strengths are and why people should follow you. it also allows u to contribute to the fanbase, and gives u a chance of being noticed by dnp! and the validation is lovely. there are many options if u want to make something. 

gifs: gifs are an ART here in the phandom, and its mechanisms still perplex me to this day bc ive never tried it. u probably already know what a gif is, but if not, its essentially a short animation made in photoshop that repeats. gifmakers are often distinguished by a unique coloring (example gifmakers: x x x), such as my friend emily’s smooth dark blue tint (x). it can be a long process to learn how to gif but it is very rewarding in the end, from what i’ve heard. (tutorials: x x)

art: there is a very wide range of phanartists, all with such talents, either digital or traditional, that you can draw inspirations from for your own work. you can make cartoons, comics, realism, abstract, nsfw even, or any mix (or none) of the former. artists on tumblr definitely deserve more attention than they get here on tumblr, so be sure to show appreciation towards them! (my fav artists: x x x)

edits: edits are the Graphic Designs of our community and are usually very aesthetically pleasing. they can be centered around a certain event, like a video or something dnp made, or just for fun. the more practice you get making them, the more dexterous u’ll become. they can be a great tool if u like the design aspect of art but don’t want to actually draw. (edit makers: x x)

icons: icons are just the little profile picture that u can insert for ur blog. it’s really easy and fun to make them, kind of like a lazy version of edits. you can make them using photoshop or an app like picsart or medibang, and it doesn’t take a lot of time. more on how to use icons in section 4. (examples: x x x) (my lil tutorial: x)

moodboards: moodboards are nine pictures arranged 3 by 3 that have a certain color scheme. it’s kind of like a collage except the photo feature here separates the pictures for u. there are a lot of innovative moodboard makers that stun me w how pretty it looks or how they arrange the pics. moodboards are also an easy and fun option! (moodboard tags: x x x)

textposts: this is by far the easiest and more common form of content u will find. it’s just writing about dnp in a textpost! if a textpost isn’t very serious, people also call it a meme or shitpost. shitposting is defs on the rise here so its a good business to get into. it’s also a great outlet for ur emotions or personal connections to what dnp do! (example talk tags: x x x)

fics: by far the most famous media to come out of here, phanfiction is a popular form of phan indulgence. u have probably heard of the most scarring ones (list: x), but there is actually a really vast range of it, not just creepy smut! some other genres are fluff, angst, and slow burns. u will discover that, despite the sterotype, not all fanfiction is bad. you can find lovely fics on @phanfictioncatalogue by genre, au, or topic. and, if u need help writing something, many writers would love to help. (a few well-known fics: x x x x x)

4. tumblr etiquette!

i know tumblr might seem like a simple social media (or perhaps not after u’ve read all the above?) but there’s a lot of things that u just....u just don’t do. it’s sort of like virtual manners, and if u don’t follow them, then it’s unlikely that people will like ur blog. once again, this is by no means me forcing u to run ur blog a certain way. it just happens that the types of ppl who break these rules are who we mock in gcs :////////. so yea, here’s some advice.

credits: if u decide to use someone’s art, edit, gif, or icon on the theme of ur blog, check what they require of u before u use it. most content creators strongly ask for credit in the description of ur blog, either by link or like ‘icon/header/art by ____’. it is just a common courtesy to the person who spent time on that, and if u think credit will ruin the aesthetic of ur blog, a) u probably don’t have an aesthetic in the first place and b) learn to appreciate art, binch. 

anonymity: anon asks can be very powerful either negatively or positively depending on how u yield them, so make sure that u are careful with what u send. compliments are always welcome and criticism as well, but blatant rudeness or hate will do nothing. u will only make someone feel bad about themselves and it will not accomplish anything. also, u face the threat of all their friends turning u into a meme. 

sensitivity: a lot of people here are way too easily offended by harmless jokes, a common example in the phandom being when we insult dnp affectionately and people take it way too much to heart. please don’t start drama over something w no real meaning. however, there are times when it is indeed necessary. if u want to criticise a blogger, be respectful of them simultaneously. by all means, if u spot someone being racist, homophobic, transphobic, misogynist, or the like, feel free to call them out on it. but beforehand, make sure that u have done ur research and are educated on the topic, or u could turn out to be blatantly wrong. 

adding to posts: everyone makes this mistake when they start out here and that’s totally okay, but adding to every post u reblog is incredibly bothersome. a rule of thumb would be don’t add anything unless what u say will actually improve the post significantly. if ur additions are along the lines of ‘LOL’ or ‘i relate!!!!’ or ‘philly is a smol bean XD’, learn to use the tags for heaven’s sake. they’re there for not only organization but also for commenting. some exceptions, though, would be if u are mentioned in the post or the op is your close friend. 

respecting privacy: this should already be obvious to u, but respect dan and phil’s boundaries. do not tag them or their main tags (#daniel howell, #danisnotonfire, #amazingphil), in any phanfics, phanart (like specifically with them as a romantic ship), or phan edits. do not talk to their family members, expose their personal info like address or phone number, and do consider that they are real people just like u. we may make things based around phan, but it is kept in a community for us and not for dan and phil’s eyes. this is very important.

5. have fun!

sorry if this is all overwhelming, but i tried to make it as simplified as possible. and also sorry for the sass, i’m kinda tired of all the ding dongs on here and want to prevent further ding dongs from being created. thanks so much for readin and be sure to send me an ask anytime if u have questions! welcome to hell!

glossary

timmy darn communism: me being my usual weird self and replacing ‘tumblr dot com’ with random words that start with the same letters

mutuals: someone who you follow and who follows you; usually who u interact with most

rb: shortening for ‘reblog’

discourse: when theres is intense discussion of a certain topic, sometimes phan-related sometimes not, sometimes serious and sometimes silly

branding: the word ‘branding’ kinda started as a joke, but it’s generally what we use to call what someone’s blog reminds them of, whether it be a certain color or a discussion topic; my branding, if u asked a mutual, would probably be impressionism, tea, and baguettes (dont ask ab that one)

html: a simple type of coding used for designing websites! u can learn basic html here or here, it’s way easier and funner than it looks

dnp: dan and phil; we also say ‘deppy’, ‘dip and pip’, ‘the boys’, ‘the rats’, and more

coloring: basically the stylization of a gif, shown through filters, textures, contrast, brightness, etc. 

talk tag: a tag in which all of the textposts that a person makes are sorted into

phanfiction terms

smut: porn fic :/ 

fluff: just what it sounds like, a type of fic that usually has a lot of soft stuff like cuddling, flirting, and looooove

angst: a fic with a lot of drama, usually sad or very emotional

slow burn: a fic where a pairing, in this case phan, slowly falls in love

au: stands for ‘alternate universe’, a fic in which dan and phil are written not as youtubers but in a completely different scenario (ie. bad boy and new guy in high school, university students, space exhibition, anything u can dream up really)

anon: short for ‘anonymous’

op: short for ‘original poster’, aka who made the post

[acprincesscat]

How to Plan a Town

So, I made a post forever ago called “My Guide to a Beautiful Town” and in it, I mentioned that I would one day make another version walking through how to build a town from the ground up, but I’ve never gotten around to doing it. I ideally wanted to make a town from the ground up, and show my process, but I keep getting busy with life and then I forget to play for months and whatnot. So, since I am going to be doing the one year challenge, I have been sitting the past few days to plan out what I’m gonna do for my town, and I’ve realized that I have a system that I use each time I plan a new town (and I have 6 towns already). Because most of what I do now with ACNL is I get an idea, and with the help of hacks, I can just decorate my town how I want because that’s all I really wanna do with ACNL now is just decorate it which is why the challenge will be fun and a step back from how I’ve been playing. So, for those who have trouble planning a town, this is how I usually do it:

So, I like to write things down in a notebook cause I’m old fashioned, but you can use a google doc or word or just your brain. I find that paper and pen helps my thoughts flow a little better. But you do you.

Step 1: Come up with a theme

This is something I am typically very good at. I have several towns written down, that I may or may not ever make, but I have the idea for them. If you aren’t as good at coming up with ideas, however, a good idea is to browse the internet. Tumblr has a huge ACNL community, and there are all kinds of blogs out there that can give you inspiration. Just searching ‘acnl’ or ‘animal crossing’ in the tumblr search bar can pull up all kinds of pictures of towns that people have shared. You can also use google or pinterest if you like. I have several QR blogs that I saved that I like to browse as well, sometimes finding a path or an outfit might inspire me. You can also tap into your other interests. TV shows, comics, books, movies, other video games, anything that inspires you, and you feel like you can create it in ACNL, go for it. 

I’m not going to number the rest of these steps because really they can be done in any order:

Next in my handy dandy notebook, I usually make a page that looks something like this:

Town Name: *the name of the town/ideas for names

Mayor: *includes name, face guide, hair, eye color, any general notes about them, skin tone, etc

Alt 1:

Alt 2:

Alt 3:

Villagers: *10 “dream” villagers

PWPs: *a list of pwps that I think will fit the theme

And then I start filling in the blanks. So for example, if we took my town Camellia that I just finished, it would look something like this:

Town Name: Camellia

Mayor: Caterina (AAB, super short dark brown pixie, blue eyes, dark skin, a cute little witch)

Alt 1: Rose (BBB, mid-length pink, blue eyes, pale skin, forest fairy)

Alt 2: Sophie (BBA, wavy gray, grey eyes, pale skin, ghost)

Villagers: Molly, Fauna, Deirdre, Beau, Shari, Teddy, Scoot, Shep, Lucy, Purrl

PWPs: metal bench, streetlight, stonehenge, statue fountain, camping cot, fire pit, zen streetlight (x2), zen bell, log bench, hammock (x2), windmill, stone tablet, totem pole, outdoor chair, water well, light house, water pump, wisteria trellis, wooden bridges, classic police station

I use a variety of sources to help me gather all that information:

JVGS Face Guide

JVGS Hair Guide

PWPs

Villagers

RV Villagers

And this is just the preliminary planning, obviously a lot of this can change as you work with the town and see what else you want to do.

For those that are confused by my AAB, BBB, BBA lingo, that’s just how I coded the face guide. So, what face you get is dependent on your conversation with Rover, so when you get past your name and gender and get the window that has three options: “Never been there” “I don’t remember” or “It’s a secret” I code all of those as A, B, and C respectively then each additional dialogue is either A or B (A on top, B on bottom). 

Once I have all that information, I start considering what I want to do with character houses. This can be tricky, and this is probably the thing that I change the most once I get started in the actual town, but if the character has a theme, like Cat is a witch, I see if I can work off that theme with some of the rooms in her house. So on the next page of my handy-dandy notebook, I make something that looks like this:

Houses:

Caterina:

Main: Living room (cute, cozy, bright)

Upstairs: Observatory (stars, bright colors, strange knickknacks) 

Left: Kitchen (witchy, foresty)

Right: Library (old, dark, witchy)

Back: N/A

Basement: Bedroom (bright, colorful, cute)

Once I have a general idea of the theme, or if I’m stumped on what I want to do with a room, I go to MoriDB and browse their furniture catalog. I usually have a wishlist for the whole town at the start then I break that into specific character wishlists as things progress. But I’ll browse through furniture and add things that I would like to try and incorporate into any of those rooms, or I look at what’s available and consider what I can make with it if I don’t know what I wanna do. I also go back to tumblr, pinterest, google, etc to look at other people’s towns, I visit dream towns to get ideas, pretty much anywhere that posts acnl, I’m there. Once I compile a hefty list of things to include in houses, I move onto the next step, and I do repeat this step often because sometimes I get all the stuff I picked initially, and still feel like my rooms need a little something extra, or I get a new idea for a room.

Next, I start browsing paths I want to use. There are a ton of blogs out there for paths, pinterest has a ton, you can google and find people’s personal blogs with qrs, wherever you like to go to look for qrs. I’m not even going to list all of the places I look here, maybe if someone asks I’ll make another post of just QR blog reccs, but I typically search until I find something I think fits the theme I’m going for and then I either bookmark it or save it to my computer to find later.

Once I have all this information planned out, I typically will start my game. The houses can often wait, and if you don’t have everything exactly you can gather that as you go along. Mostly all you need is the town name, your mayor’s name, and what face you want them to have. Everything else has no time table, I just usually plan it all beforehand, because like I said, all I ever do nowadays is decorate. After I have everything planned, it’s just a matter of executing it. 

I hope this helps a little if you don’t know where to begin planning your town. If you break it down into little sections, it’s not so bad, and a lot of those resources I linked are super helpful. As always, message me any questions you may have, and I will do my best to help out! Happy planning~

[mbaljeetsingh]

How to Build an Ionic 4 Calendar App

Because there is still no calendar component directly shipping with Ionic 4 it’s time to revisit how to build one yourself using a great package we already used in a previous post.

The problem with creating a tutorial like this is that the need for a calendar view varies in almost every app. We’ll dive into building a calendar using the ionic2-calendar package which offers some different views and can be customised to some degree, but if you have very specific requirements you might need to create everything from the ground up yourself.

I’ve also talked about alternatives and using a different package inside Building a Calendar for Ionic With Angular Calendar & Calendar Alternatives.

Starting our Calendar

We start with a blank app and add our calendar package. Don’t be shocked by the name – it still works great with v4 so go ahead and run:

ionic start devdacticCalendar blank --type=angular cd devdacticCalendar npm i ionic2-calendar

Now we don’t need to add it to our main module but to the actual module file of the page where we want to add the calendar. In our app we already got the default page so let’s simply add it to the app/home/home.module.ts like:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; import { NgCalendarModule } from 'ionic2-calendar'; @NgModule({ imports: [ CommonModule, FormsModule, IonicModule, RouterModule.forChild([ { path: '', component: HomePage } ]), NgCalendarModule ], declarations: [HomePage] }) export class HomePageModule {}

There are no further imports for dates or whatsoever right now and we can dive right into it!

Creating the Calendar View

The first part of our view consists of a bunch of elements that we need to control the calendar and add new events.

We can control different aspects of the calendar, for example:

Set the view to focus today

Change the mode of the calendar which changes the view to month/week/day

Move our calendar view forward/back

Also we add a little card to create a new event to our calendar because it will be pretty empty. You can also take a look at the demo code which uses a random events function to fill your calendar for testing!

All of these things are not really essential and the important part is at the end of our view: The actual calendar component!

On this component we can set a lot of models and functions and the best way to explore all of them is the options of the package.

You will see what the functions do and what’s used once we move on to the class, so for now just open your app/home/home.page.html and change it to:

<ion-header> <ion-toolbar color="primary"> <ion-title> </ion-title> <ion-buttons slot="end"> <ion-button (click)="today()">Today</ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <!-- Card for adding a new event --> <ion-card> <ion-card-header tappable (click)="collapseCard = !collapseCard"> <ion-card-title>New Event</ion-card-title> </ion-card-header> <ion-card-content *ngIf="!collapseCard"> <ion-item> <ion-input type="text" placeholder="Title" [(ngModel)]="event.title"></ion-input> </ion-item> <ion-item> <ion-input type="text" placeholder="Description" [(ngModel)]="event.desc"></ion-input> </ion-item> <ion-item> <ion-label>Start</ion-label> <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.startTime" [min]="minDate"></ion-datetime> </ion-item> <ion-item> <ion-label>End</ion-label> <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.endTime" [min]="minDate"></ion-datetime> </ion-item> <ion-item> <ion-label>All Day?</ion-label> <ion-checkbox [(ngModel)]="event.allDay"></ion-checkbox> </ion-item> <ion-button fill="outline" expand="block" (click)="addEvent()" [disabled]="event.title == ''">Add Event</ion-button> </ion-card-content> </ion-card> <ion-row> <!-- Change the displayed calendar mode --> <ion-col size="4"> <ion-button expand="block" [color]="calendar.mode == 'month' ? 'primary' : 'secondary'" (click)="changeMode('month')">Month</ion-button> </ion-col> <ion-col size="4"> <ion-button expand="block" [color]="calendar.mode == 'week' ? 'primary' : 'secondary'" (click)="changeMode('week')">Week</ion-button> </ion-col> <ion-col size="4"> <ion-button expand="block" [color]="calendar.mode == 'day' ? 'primary' : 'secondary'" (click)="changeMode('day')">Day</ion-button> </ion-col> <!-- Move back one screen of the slides --> <ion-col size="6" text-left> <ion-button fill="clear" (click)="back()"> <ion-icon name="arrow-back" slot="icon-only"></ion-icon> </ion-button> </ion-col> <!-- Move forward one screen of the slides --> <ion-col size="6" text-right> <ion-button fill="clear" (click)="next()"> <ion-icon name="arrow-forward" slot="icon-only"></ion-icon> </ion-button> </ion-col> </ion-row> <calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate" (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" (onTimeSelected)="onTimeSelected($event)" startHour="6" endHour="20" step="30" startingDayWeek="1"> </calendar> </ion-content>

The only fixed properties we have set are these:

startHour/endHour: Pretty self explanatory, right?

step: How detailed the hour blocks will be divided in the week/day view

startingDayWeek: Welcome all US friends, in Germany the week starts on Monday so put a 0 or 1 here whatever you prefer

Now we need to put some logic behind all of this.

Note: We are using the calendar in its basic version. By now there’s really a lot you can customise, especially by using custom templates for cells and different other slots that you can easily add. If it doesn’t do the job immediately for you try to play around with these elements to make it fit your needs.

Adding the Calendar Logic

We start with the basics for adding new events. For this we will keep an array eventSource that we also previously connected to the calendar.

If you have an API where you pull the data from, you gonna add the data to this source as well!

Also, normally the events only consists of a title, the times and an all day flag but actually you can have more info in there like a description, id or whatever – you will see that it get’s passed through when you click on an even later.

We also have to make some date transformation as the ion-datetime expects an ISO string for the date while the calendar wants it to be a Date object.

Finally, if the new event should be an all day event we have to manually patch the starting and end times using a little transformation as well.

Now go ahead with the first part of your app/home/home.page.ts:

import { CalendarComponent } from 'ionic2-calendar/calendar'; import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core'; import { AlertController } from '@ionic/angular'; import { formatDate } from '@angular/common'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage implements OnInit { event = { title: '', desc: '', startTime: '', endTime: '', allDay: false }; minDate = new Date().toISOString(); eventSource = []; viewTitle; calendar = { mode: 'month', currentDate: new Date(), }; @ViewChild(CalendarComponent) myCal: CalendarComponent; constructor(private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string) { } ngOnInit() { this.resetEvent(); } resetEvent() { this.event = { title: '', desc: '', startTime: new Date().toISOString(), endTime: new Date().toISOString(), allDay: false }; } // Create the right event format and reload source addEvent() { let eventCopy = { title: this.event.title, startTime: new Date(this.event.startTime), endTime: new Date(this.event.endTime), allDay: this.event.allDay, desc: this.event.desc } if (eventCopy.allDay) { let start = eventCopy.startTime; let end = eventCopy.endTime; eventCopy.startTime = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate())); eventCopy.endTime = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate() + 1)); } this.eventSource.push(eventCopy); this.myCal.loadEvents(); this.resetEvent(); } }

Now we are already able to add events to the calendar, but we also need some more functions that we connected inside the view previously.

Let’s talk about the them real quick so we can finish our basic calendar implementation:

next/back: Manually change the view (which normally works by swiping) using the underlying Swiper instance because the calendar uses Ionic Slides

changeMode: Change between the month/week/day views

today: Focus back to the current date inside the calendar

onViewTitleChanged: The view changed and the title is automatic updated

Next to these basic functionality we also receive the click event when we select an event inside the calendar.

As said before, here we get the full object from our source so if you use some API data you now got the ID and can easily show the details for an event. In our case we use the Angular date pie from code to transform the dates and then just present an alert for testing.

Finally whenever you click on a time slot in the calendar the onTimeSelected will be triggered and we use it to set the current start and end date of our event.

Normally you might want to immediately open an overlay to create a new event when a user clicks on a time slot like they are used to from Google or Apple calendar! We also have to make sure to use ISO strings for the date again at this point because of the component we used.

Now wrap up everything by adding these functions below your existing code inside the app/home/home.page.ts but of course still inside the class:

// Change current month/week/day next() { var swiper = document.querySelector('.swiper-container')['swiper']; swiper.slideNext(); } back() { var swiper = document.querySelector('.swiper-container')['swiper']; swiper.slidePrev(); } // Change between month/week/day changeMode(mode) { this.calendar.mode = mode; } // Focus today today() { this.calendar.currentDate = new Date(); } // Selected date reange and hence title changed onViewTitleChanged(title) { this.viewTitle = title; } // Calendar event was clicked async onEventSelected(event) { // Use Angular date pipe for conversion let start = formatDate(event.startTime, 'medium', this.locale); let end = formatDate(event.endTime, 'medium', this.locale); const alert = await this.alertCtrl.create({ header: event.title, subHeader: event.desc, message: 'From: ' + start + '<br><br>To: ' + end, buttons: ['OK'] }); alert.present(); } // Time slot was clicked onTimeSelected(ev) { let selected = new Date(ev.selectedTime); this.event.startTime = selected.toISOString(); selected.setHours(selected.getHours() + 1); this.event.endTime = (selected.toISOString()); }

You now got a fully functional calendar with a lot of ways to customise the appearance and react to user input and different events!

Conclusion

The Ionic2-calendar package remains one of the best ways to add a calendar to your Ionic app fast. If you depend on drag & drop functionality you still have to look somewhere else as this is not yet included (maybe in the future?).

Have you used a better calendar inside your Ionic app yet?

Let me know your experiences in the comments!

You can also find a video version of this article below.

The post How to Build an Ionic 4 Calendar App appeared first on Devdactic.

via Devdactic https://ift.tt/2UJknmd